实现小程序抖音风格视频全屏滑动挑战

在小程序开发中，实现类似抖音视频的整屏切换功能是一个具有挑战性的任务。该需求要求在小程序中模拟抖音短视频的浏览体验，包括全屏展示、上下滑动切换视频并带有动画效果。开发者尝试了多种策略来达成目标： 1. **直接在video标签上添加时间监听**：这是最初的思路，但由于video是原生组件且层级高，触摸事件难以捕获，因此这种方法并未成功。 2. **cover-view层监听**：为了克服层级问题，开发者尝试在video之上覆盖一层cover-view，通过这个间接的层级结构添加时间监听，同样未能实现触摸事件的响应。 3. **onPageScroll页面滚动处理**：当前两种方法都失败后，开发者转而利用小程序的onPageScroll事件，监控页面滚动距离。这种方法在iOS上有效，但在安卓设备上遇到了问题，尽管配置了滚动相关设置，也无法满足需求。 4. **Canvas滚动事件监听**：作为最后的手段，开发者使用canvas层定位在video上方，通过监听canvas的滚动事件，实现了预期的整屏滚动和视频切换功能。canvas的使用确保了跨平台兼容性，尤其是在处理无限滚动的需求时，发现可以通过wx.createAnimation() API动态创建动画。 WXML代码中，视频被设置为全屏，与屏幕等宽高，并且使用cover-view显示点赞、评论和分享等交互元素。canvas被定位在视频上方，负责实际的滚动操作，滚动时视频src会被相应地改变。 在WXSS中，主要进行定位样式，由于产品需求要求无限滚动，初期尝试使用animation动画遇到了困难，最终通过API实现了更灵活的滚动动画管理。 JavaScript部分关键在于`wx.createAnimation()`的使用，它在onLoad阶段初始化动画对象，并监听滚动事件，根据滚动方向动态调整视频内容。 总结来说，实现小程序类似抖音视频的整屏切换功能需要开发者巧妙地结合不同层级组件和事件处理机制，同时利用小程序提供的高级API来处理复杂的动画和滚动行为。这个过程既考验了技术实力，也体现了小程序生态的灵活性。