微信小程序实现多视频video采坑，上下滑动视频

小程序做滑屏视频，按照h5的思路开发。一路采坑……

尝试:

第一次：relative布局，使用translateY来实现实时上滑。直接借鉴H5的思路。

页面布局relative，一个视频宽度空间充满屏幕。

每次向下只多加载一个视频，每次只保持页面存储三个屏幕的内容，也就是三个视频，向上滑动一次，再渲染一个视频。监听手势滑动，改变当前可视区域的translateY。嗯，可以的。

然后第一步核心流程就卡住了，手势touchmove，然后改变translateY非常卡，性能很好的手机，都能看到卡顿现象，差的手机更不用说，set-data本来就是异步的，实时操作set-data太频繁，小程序处理性能完全比不上H5的webview。

那既然是是滚动交互的逻辑层和视图层交互性能差，那我们就要规避这个交互，于是想试试scroll-view，这个可是系统滚动的，不需要Js参与。

 

第二次：使用scroll-view

外层套一个scroll-view，内层用多个video充满屏幕。 

每次当前视频区域内，上滑只有一个视频，下滑也只有一个视频，页面上只有三个视频。手势上滑下滑都非常流畅，简直perfect。

但是在可视区域只有一个视频，用户滑动距离短，松手的时候视频可是要自动滑下去归位呀，监听pageScroll停止之后，手动判断滚动距离，然后设置scroll-top，但是设置完之后页面明显延迟了1s，滚动完之后，停留了1s钟然后才归位，体验……很差。

这个是scroll-view的归位问题。而且文档也说了不要在scroll-view中使用video。

既然scroll-view不能使用video,导致设置值这么慢，swiper是系统支持滚动和归位呢，多好啊。那我是否可以用swiper来试试呢。

第三次：使用swiper

使用一个swiper外层，在swiper-item里面嵌入视频,vertical=true，每一个视频还是充满屏幕，

      在swiper-item里面嵌入video之后，video是最高层，并不能触发swiper的滑动事件，swiper的滑动根本不生效，监听video的滑动，去更新swiper，那问题一样，卡卡卡。

 

来去N回合，还是放弃了实时滑动，看来小程序中要如H5一样，做个好的滑屏不容易呀~

关键实现技术点：

1、页面使用absolute布局，监听视频的touchmove事件，然后在touchend之后，判断是否翻页，如果要翻页，修改animation的Y位移值。

const animation = wx.createAnimation({
            duration: 300,
            timingFunction: 'ease',
});
animation.translateY(y).step();

 

2、video，input，cover-view共存