17_微信小程序之抖音微视无限滑动视频列表自定义组件编写

微信小程序之抖音微视无限滑动视频列表自定义组件编写

一.先上效果图

看到上面，你可能首先会想到，使用swiper然后将swiper的circular设置为true，那么，想象一下，假如视频很多的情况下，1千个，甚至上万个的情况下，只要有一个swiper-item，就会渲染一个Video播放器，这样是非常耗费性能的，本文将在这个基础上做优化，大致思路就是，不管我们的数据有多少条，我们都只渲染3个swiper-item，再配合swiper的切换，切换swiper-item的内容实现复用

二.swiper实现循环滑动

<view class="video-swiper-container"><swiper class="video-swiper" circular vertical><swiper-item wx:for="{{_videoList}}" wx:key="*this"><view class="video_item" style="background:{{index % 3 == 0 ? '#f00' : (index % 3 == 1 ? '#0f0':'#00f')}}">{{item.index}}  </view></swiper-item></swiper>
</view>

videoList: {type: Array,value: [],observer: function observer() {let newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];let _videoList = newVal.map((item, index) => {let result = {index: index,url: item,objectFit: 'contain'}return result;})this.setData({_videoList: _videoList})}
}

代码很简单，只是将swiper的circular设置为了true，并且指定滑动方向为垂直方向，至于video标签，咱们先用一个View标签替换

三.第一次初始化

如果数据本身就小于3条，那么直接把传入的数据全部渲染，swiper默认选中第一个即可，如果数据大于3条，需要根据传入的index确定第一次加载时，swiper-item需要渲染的三个数据项，swiper默认选中第二个

如果传入的index是0，那么，swiper依次渲染最后一条，第一条，第二条

如果传入的index是最后一个，那么依次渲染倒数第二条，最后一条，第一条

如果传入的index是其他位置的，则依次渲染上一条，当前index，下一条

<view class="video-swiper-container"><swiper class="video-swiper" circular vertical current="{{_videoList.length >= 3 ? 1:playIndex}}"><swiper-item wx:for="{{curQueue}}" wx:key="*this"><view class="video_item" style="background:{{index % 3 == 0 ? '#f00' : (index % 3 == 1 ? '#0f0':'#00f')}}">{{item.index}}  </view></swiper-item></swiper>
</view>

videoList: {type: Array,value: [],observer: function observer() {let newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];let _videoList = newVal.map((item, index) => {let result = {index: index,url: item,objectFit: 'contain'}return result;})this.setData({_videoList: _videoList})this._videoListChange()}
},
playIndex: {type: Number,value: 0
}

_videoListChange: function() {let playIndex = this.data.playIndex;let curQueue = this.data.curQueue;let videoList = this.data._videoList;if(curQueue.length <= 0) {if (videoList.length >= 3) {if (playIndex == 0) {curQueue[0] = videoList[videoList.length - 1]curQueue[1] = videoList[0]curQueue[2] = videoList[1]} else if (playIndex == videoList.length - 1) {curQueue[0] = videoList[videoList.length - 2]curQueue[1] = videoList[videoList.length - 1]curQueue[2] = videoList[0]} else {curQueue[0] = videoList[playIndex - 1]curQueue[1] = videoList[playIndex]curQueue[2] = videoList[playIndex + 1]}} else {curQueue = videoList;}this.setData({curQueue: curQueue})}
}

四.配合swiper的切换，切换swiper-item的内容实现复用

当swiper切换完成后，判断是向上滑动切换到下一个，还是向下滑动切换上一个，假如总共有5条数据

向上滑动切换下一个

一开始，第二个swiper-item被选中，实际显示的是第一条数据

第一次向上滑动切换后，此时会切换到第三个swiper-item，实际显示的是第二条数据，只需要将第一个swiper-item显示的内容设置成第三条数据；

再一次向上滑动切换后，此时会切换到第一个swiper-item，实际显示的是第三条数据，只需要将第二个swiper-item显示的内容设置成第四条数据；

再一次向上滑动切换后，此时会切换到第二个swiper-item，实际显示的是第四条数据，只需要将第三个swiper-item显示的内容设置成第五条数据；

再一次向上滑动切换后，此时会切换到第三个swiper-item，实际显示的是第五条数据，只需要将第一个swiper-item显示的内容设置成第一条数据；

…

向下滑动切换上一个

一开始，第二个swiper-item被选中，实际显示的是第一条数据

第一次向下滑动切换后，此时会切换到第一个swiper-item，实际显示的是第五条数据，只需要将第三个swiper-item显示的内容设置成第四条数据；

再一次向下滑动切换后，此时会切换到第三个swiper-item，实际显示的是第四条数据，只需要将第二个swiper-item显示的内容设置成第三条数据；

再一次向下滑动切换后，此时会切换到第二个swiper-item，实际显示的是第三条数据，只需要将第一个swiper-item显示的内容设置成第二条数据；

再一次向下滑动切换后，此时会切换到第一个swiper-item，实际显示的是第二条数据，只需要将第三个swiper-item显示的内容设置成第一条数据；

…

<view class="video-swiper-container"><swiper class="video-swiper" circular vertical current="{{_videoList.length >= 3 ? 1:playIndex}}" bindchange="onSwiperChange"><swiper-item wx:for="{{curQueue}}" wx:key="*this"><view class="video_item" style="background:{{index % 3 == 0 ? '#f00' : (index % 3 == 1 ? '#0f0':'#00f')}}">{{item.index}}  </view></swiper-item></swiper>
</view>

data: {curQueue:[],_last: -1,
},onSwiperChange: function (event) {let _data = this.data;let _last = _data._last;let curQueue = _data.curQueue;let current = event.detail.current;let videoList = _data._videoList;if (videoList.length >= 3) {let diff = current - _last;if (diff === 0) return;this.data._last = current;let direction = diff === 1 || diff === -2 ? 'up' : 'down';/let curItem = curQueue[current]let realIndex = curItem.indexif (direction == 'up') {let change = (current + 1) % 3let next = (realIndex + 1) % videoList.lengthcurQueue[change] = videoList[next]} else {let change = (current - 1) < 0 ? 2 : current - 1let pre = (realIndex - 1) < 0 ? (videoList.length - 1) : (realIndex - 1)curQueue[change] = videoList[pre]}this.setData({curQueue: curQueue}) }
}

五.最后把View换成Video，并控制播放即可

<view class="video-swiper-container"><swiper class="video-swiper" circular vertical current="{{_videoList.length >= 3 ? 1:playIndex}}" bindchange="onSwiperChange"><swiper-item wx:for="{{curQueue}}" wx:key="*this"><view class="video_item" style="background:{{index % 3 == 0 ? '#f00' : (index % 3 == 1 ? '#0f0':'#00f')}}"><video style="width: 100%; height: 100%;" id="video_{{index}}" loop="{{loop}}" enable-play-gestureenable-progress-gesture show-center-play-btn="{{false}}" direction="0" controls="{{true}}" src="{{item.url}}"object-fit="{{item.objectFit || 'cover'}}"/></view></swiper-item></swiper>
</view>

Component({/*** 组件的属性列表*/properties: {videoList: {type: Array,value: [],observer: function observer() {let newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];let _videoList = newVal.map((item, index) => {let result = {index: index,url: item,objectFit: 'contain'}return result;})this.setData({_videoList: _videoList})this._videoListChange()}},playIndex: {type: Number,value: 0},},lifetimes: {attached: function attached() {this.data._videoContexts = [wx.createVideoContext('video_0', this), wx.createVideoContext('video_1', this), wx.createVideoContext('video_2', this)];}},/*** 组件的初始数据*/data: {curQueue:[],_last: 1,_videoContexts: []},/*** 组件的方法列表*/methods: {_videoListChange: function() {let playIndex = this.data.playIndex;let curQueue = this.data.curQueue;let videoList = this.data._videoList;if(curQueue.length <= 0) {if (videoList.length >= 3) {if (playIndex == 0) {curQueue[0] = videoList[videoList.length - 1]curQueue[1] = videoList[0]curQueue[2] = videoList[1]} else if (playIndex == videoList.length - 1) {curQueue[0] = videoList[videoList.length - 2]curQueue[1] = videoList[videoList.length - 1]curQueue[2] = videoList[0]} else {curQueue[0] = videoList[playIndex - 1]curQueue[1] = videoList[playIndex]curQueue[2] = videoList[playIndex + 1]}} else {curQueue = videoList;}this.setData({curQueue: curQueue}, () => {this.playCurrent(videoList.length >= 3 ? 1:playIndex);}) }},onSwiperChange: function (event) {let _data = this.data;let _last = _data._last;let curQueue = _data.curQueue;let current = event.detail.current;let videoList = _data._videoList;if (videoList.length >= 3) {let diff = current - _last;if (diff === 0) return;this.data._last = current;let direction = diff === 1 || diff === -2 ? 'up' : 'down';/let curItem = curQueue[current]let realIndex = curItem.indexif (direction == 'up') {let change = (current + 1) % 3let next = (realIndex + 1) % videoList.lengthcurQueue[change] = videoList[next]} else {let change = (current - 1) < 0 ? 2 : current - 1let pre = (realIndex - 1) < 0 ? (videoList.length - 1) : (realIndex - 1)curQueue[change] = videoList[pre]}this.setData({curQueue: curQueue}, () => {this.playCurrent(current);}) }},playCurrent: function playCurrent(current) {let curQueue = this.data.curQueuethis.data._videoContexts.forEach((ctx, index) => {if(index !== current) {ctx.pause()ctx.seek(0)} else {ctx.play()}});},}
})