php仿抖音短视频小程序开发,微信小程序中实现类似抖音短视频切换效果

1.需求背景介于之前开发了一个直播和短视频类型的微信小程序，因为考虑到后期兼容和稳定技术上面采用了原生小程序来进行实现。但是在开发过程中，遇到一个问题，实现一个类似抖音这样的短视频/直播视频的切换效果。本人也是查找了多个小程序UI库和github也没有一套比较类似的方案，于是开始自行开发这样一套比较通用的控件，主要解决

提示:

因为文章中几乎所有代码和实现都是截图显示，所以想要查看效果或者代码的可以直接打开github地址

1.实现抖音这样的 短视频 的上下滑动切换

2.实现 直播 的上下滑动切换

3.用户可对视频或者直播的按钮进行自定义

2.开发前知识点须知

2.1 原生小程序自定义组件的使用和基本属性

2.2 原生小程序video和live-player的常用属性

参考微信官方video api

参考微信官方live-player api

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进行查看。