uni-app视频流上下滑动需分平台实现：小程序用cover-view遮罩劫持touch事件控制video显隐切换，App端必须用nvue原生video组件并手动管理3个实例的生命周期，H5仅可凑合。
uni-app 中用 video 组件实现上下滑动视频流，核心是「原生渲染 + 手势劫持 + 懒加载」
直接说结论：uni-app 默认的 video 在非 App 平台（尤其是微信小程序）无法真正全屏、无法拦截滑动手势、无法稳定复用——必须分平台处理，App 端走 native 渲染，小程序端靠 cover-view + video 组合 + bindtouchmove 手动控制播放器显隐与切换。
为什么 video 在小程序里不能直接上下滑？
微信小程序的 video 是原生组件，层级高于所有 webview 内容，touchstart/move 事件根本无法穿透到它上面；同时，bind:touchmove 在 video 上无效，你监听不到手指在视频区域的滑动。结果就是：用户想上滑切视频，手指一碰到视频就“失灵”了。
- 现象：
touchmove在video区域不触发，或只在边框空白处生效 - 原因：小程序原生组件的事件隔离机制，不是 bug，是设计
- 解法：用
cover-view盖一层透明遮罩，把滑动事件抢过来，再手动控制video的src、autoplay和show-center-play-btn
App 端必须用 nvue + video 原生组件
H5 和小程序能“凑合”，但 App 端要流畅、低延迟、支持后台音频、手势跟手，就必须放弃 vue 页面，改用 nvue。uni-app 的 nvue 视频组件（<video>）是真原生，支持 playbackRate、direction、gestureConfig，且可被 touch 事件完整捕获。
抖音快手短视频创作专家
下载
抖音/快手短视频全栈专家。提供内容策划、脚本撰写、爆款拆解、算法运营、带货策略服务。适用于：创作短视频脚本、制定内容选题、分析爆款视频、制定平台运营策略、撰写带货话术、设计标题封面、理解算法逻辑。服务对象：短视频创作者、自媒体运营、品牌方、MCN机构。
-
touchstart记录touches[0].pageY -
touchmove计算偏移量，当Math.abs(deltaY) > 50时立即触发切换 - 切换前调用
this.$refs.video.pause()，切换后this.$refs.nextVideo.play() - 关键配置：
show-progress="false"、show-fullscreen-btn="false"、show-center-play-btn="false"，否则 UI 干扰手势
如何避免内存爆炸和卡顿？
抖音式视频流最常踩的坑不是“怎么切”，而是“切多了崩”。100 条视频全挂 video 标签？小程序直接白屏，App 端内存飙升到 500MB+。
- 只保留当前页 + 上一页 + 下一页共 3 个
video实例，其余v-if="false"或removeChild销毁 - 切换完成 500ms 后，对已滑出视口的
video调用pause()+src = ''+load()释放资源 - 小程序中慎用
autoplay：设为false，等bindloadedmetadata触发后再play()，否则大量视频并发加载会阻塞主线程 - App 端用
nvue时，video的preload设为"auto"即可，系统会自动管理缓冲区
真正难的不是滑动逻辑，而是「什么时候销毁、什么时候预加载、什么时候强制暂停」——这些边界点稍有偏差，用户划着划着就卡住或黑屏了。
