小程序实现feed流（一拖三的组件技巧）

小程序：一拖三视频组件&setData使用技巧

1. 视频预加载

2. 视频实例复用

3. 视频预加载

4. autoplay自动播放触发加载

5. bindplay在播放开始后暂停播放
   前体：预加载的视频既要显示，又要不显示。

如果video标签渲染时是隐藏的，则不会触发自动播放
隐藏的几个例子：

• 'display'为'none';
• 'width'或'height'为0;
• 'wx:if="{{false}}"'

1. 视频预加载
   所以需要在屏幕之外显示视频元素：

<view
  class="videos"
  style="transform:translateY({{videoScrollY}}px)"
>
<video
  wx.for="{{videos}}"
  wx.key="{{item.rowKey}}"
  bindPlay="bindPlay"
  autoPlay
>
</video>
</view>

2. 视频实例复用
   关键点：
   视频列表索引
   当前播放视频
   预加载视频
   包含3个video的视频列表

3. 当前播放的视频索引 index = activeIndex % 3

4. 预加载索引 preIndex = (activeIndex + 1) % 3

let preIndex = Math.min(list.length - 1, Math.max(0, (activeIndex + direction)));

this.setData({
  ['videos[${preIndex % 3}]']: list[preIndex],
  videoScrollY: -windowHeight * (activeIndex % 3),
});