小程序实现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),
});

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 8,758评论 1 27
  • 原文链接http://www.cnblogs.com/kenshincui/p/4186022.html 音频在i...
    Hyman0819阅读 17,889评论 3 71
  • 简单事情简单做-宽度自适应 所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界...
    fortunatelys阅读 234评论 0 0
  • 天还在下着雨 似乎没有要停的意思 心中预谋已久的离开 随着雨水慢慢滋生 我要走了 最舍不得的就是你 我不是一个乐观...
    十月听风阅读 84评论 0 2
  • 人生都要历经风雨轮回,感谢老公一路的陪伴与支持! 自从我踏上微商之路的那一天,就注定了我人生的目标。我不可以...
    旭儿姐阅读 474评论 0 0