小程序实现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>
  1. 视频实例复用
    关键点:
    视频列表索引
    当前播放视频
    预加载视频
    包含3个video的视频列表

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

  3. 预加载索引 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),
});

推荐阅读更多精彩内容