1.需求背景介于之前开发了一个直播和短视频类型的微信小程序，因为考虑到后期兼容和稳定技术上面采用了原生小程序来进行实现。但是在开发过程中，遇到一个问题，实现一个类似抖音这样的短视频/直播视频的切换效果。本人也是查找了多个小程序UI库和github也没有一套比较类似的方案，于是开始自行开发这样一套比较通用的控件，主要解决
提示:
因为文章中几乎所有代码和实现都是截图显示，所以想要查看效果或者代码的可以直接打开github地址
短视频切换效果源码
1.实现抖音这样的 短视频 的上下滑动切换
2.实现?直播 的上下滑动切换?
3.用户可对视频或者直播的按钮进行自定义
2.开发前知识点须知
2.1 原生小程序自定义组件的使用和基本属性
自定义组件
2.2 原生小程序video和live-player的常用属性
参考微信官方video api
video | 微信开放文档
参考微信官方live-player api
live-player | 微信开放文档
3.思路梳理和程序设计
3.1.确认功能最终输出的方式? ?组件
3.2.设计组件的各项参数以及事件
3.3.识别手指在屏幕上面的滑动方向
3.4.设置不同模式（视频/短视频）条件渲染
3.5.保持无论视频还是直播在播放中只有一个实例
3.6 暴露出 加载到最后一页时候的事件 给用户自行处理
4.实现的步骤和具体代码
4.1 设计好组件各项参数和事件以后开始进行编码工作，在components文件夹中创建自定义组件scroll-view，作为我们实现功能的核心组件，该组件接受调用页面传入的各项参数并进行各种解析和计算，达到最终效果
并将要设计好的组件中各项属性抽离出来，放在properties中
定义内部data便于识别手指方向，切换动画信息，列表信息等
4.2.? 实现 视频/直播切换 的效果，可以采用css3或者小程序的createAnimation进行实现
实现思路?
1.视频是一个长列表在一列上面上下排开，最上面的显示，超出部分隐藏
2.上下滑动切换的时候，拿到当前视频的索引的切换，动态换算距离顶部的高度，再给高度变化加上了css3过渡或者通过wx.createAnimation进行添加动画
? ?wxml:
wxss:
? ?2.计算手指滑动方向?
? ? 3.根据滑动进行切换，并触发对应hock
? ? 4. 条件判断 视频/直播
5.测试并使用
在pages/index中，需要在index.json中引入我们自定义的组件
wxml中的代码:
js中的代码:
目前是已经初步实现的短视频和直播切换,以上是核心步骤和代码截图，如果有想了解更多的，可以打开github进行查看。
视频切换github源码
