微信小程序中类似的抖音短视频切换效果

1、在需求的背景下，之前开发了直播和短视频类型的微信小程序，因为考虑到后期兼容性和稳定性技术，采用了原生小程序来实现。然而，在开发过程中，我们遇到了一个问题，那就是像抖音一样实现短视频/直播切换效果。我还搜索了几个小程序UI库和github，但没有类似的解决方案，所以我开始开发这样一个通用控件，主要是为了解决

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

1.实现抖音等短视频上下滑动切换

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

3.用户可以自定义视频或直播按钮

2.开发前的知识点2.1本机小程序自定义组件的使用和基本属性

2.2本地小程序视频和直播播放器的常见属性

参考微信官方视频api

参考微信官方直播播放器api

3.思路梳理和程序设计3.1.功能最终输出模式组件的确认

3.2.设计组件的参数和事件

3.3.识别手指在屏幕上的滑动方向

3.4.在不同模式下设置条件渲染（视频/短视频）

3.5.仅保留一个视频或直播实例

3.6将加载到最后一页的事件公开给用户处理

4.实现步骤和具体代码4.1在设计组件的各种参数和事件后，开始编码。在组件文件夹中创建一个名为滚动视图的用户定义组件。作为函数的核心组件，该组件接受从调用页面传入的各种参数，并执行各种分析和计算以实现最终效果

提取要设计的组件的属性并将其放置在属性中

定义内部数据以便于识别手指方向、切换动画信息、列表信息等

4.2.为了实现视频/直播切换的效果，您可以使用css3或小程序的createAnimation来实现这个想法

1.视频是一列上下排列的长列表。顶部显示，多余部分隐藏

2.上下滑动切换时，获取当前视频的索引开关，从顶部动态转换高度，并通过wx添加css3过渡到高度变化或添加动画。创建动画

wxml：

wxss：

2.计算手指的滑动方向

3.根据滑动情况切换并触发相应的挂钩

4.状态判断视频/直播

5.要在pages/index中测试和使用，我们需要在index.json中引入定制组件

wxml中的代码：

js代码：

目前，短视频与直播的切换已初步实施。以上是核心步骤和代码截图。如果您想了解更多信息，可以打开github查看。