小程序视屏循环列表

先把视屏移除出来通过点击事来进行播放当前点击的视频

//同一个页面两个列表循环不同主题的视频
//第一个列表
<view class='life_center' wx:for="{{videolis}}" wx:for-item="videoitem" wx:key="videos">
<view class='life_center_vid'>
<video id="{{'vide'+index}}" class='life_center_vid' wx:if="{{listnum == index}}" controls='true' autoplay='{{true}}'   src='{{videoitem.video}}'></video>
<view class='life_center_vid' style='display:{{listnum == index?"none":"block"}}'>
<image  class='life_center_vid' mode='aspectFill' src='{{videoitem.thumb}}'></image>
<text id="{{'vide'+index}}"  class='iconfont icon-bofang1 bofang' data-name="{{'vide'+index}}" data-idx="{{index}}"  bindtap='videoplay'></text>
</view>
</view>
</view>
//第二个列表
<view class='life_center' wx:for="{{ailis}}" wx:for-item="ailisai" wx:key="videos">
<view class='life_center_vid'>
<video id="{{index}}" class='life_center_vid' wx:if="{{listnums == index}}" controls='true' autoplay='{{true}}'   src='{{ailisai.video}}'></video>
<view class='life_center_vid' style='display:{{listnums == index?"none":"block"}}'>
<image  class='life_center_vid' mode='aspectFill' src='{{videoitem.thumb}}'></image>
<text id="{{index}}"  class='iconfont icon-bofang1 bofang'  data-idx="{{index}}"  bindtap='videoplay'></text>
</view>
</view>
</view>

data: {
listnum:"-1",
listnums:"-1",
modalHidden:false
},
videoplay(e) {
let id = e.currentTarget.id;
let name=e.currentTarget.dataset.name;
let idx = e.currentTarget.dataset.idx;
console.log(e)
console.log(id)

if (id == name){
let vdieos = wx.createVideoContext(id);
vdieos.play();
this.setData({
listnum: idx,
listnums: -1,
});
}else{
let vdieo = wx.createVideoContext(id);//如果是一个页面只有一处视频列表循环直接用此写法
vdieo.play();
this.setData({
listnums: idx,
listnum: -1
});
}
},