1、wxml部分代码，主要是利用捣蛋鬼
标签滑动切换，事件处理，具体参数说明可以去小程序官网文档查看https://开发者。微信。QQ。com/mini program/dev/component/swiper。超文本标记语言
2、js部分
第({/ * 页面的初始数据 */ data: { isPlay:true, video_id:"video_0", videoList:[], pageShow:false, current:0, // 当前滑块 vertical:false, // 滑块方向 offset:0, page_index:1, firstRequest:true, isRequest:true, // 是否正在发起请求，控制不会多次滑动出发接口请求多次问题 page_count:5, isHaveData:true // 判断接口返回的还有没有数据，没有设置成false }, /*生命周期函数-监听页面加载*/onLoad:函数（选项){这个。getshort video()；},//当前改变时会触发变化事件绑定更改(e){ this。setdata({当前3360 e . detail。current })这个。swipvervideo(e)；如果(这个。数据。细节。电流=这个。数据。视频列表。长度-2！这个。数据。isrequest){ this。setdata({ page _ index : this。数据。page _ index 1 }，RES={ this。setdata({ offset :(this。数据。page _ index-1)*这个。数据。page _ count，isRequest: true，})这一点。getshort video()；}) } }, //点击视频暂停活播放单击视频{ //这里的录像的简称是视频的id，因为这里我是用接口传数据的，里面有视频id let vid=e . CurrentTarget。id；让indexVideoContext=wx。createvideocontext(vid)if(this。数据。isplay){ indexVideoContext。pause()；} else { indexvideocontext。play()；} this.setData({ isPlay:this.data.isPlay }) }，//获取视频列表getShortVideo(){ wx。云。调用函数({ name : '短视频'，data:{ type: '核对表，offset: this.data.offset，page _ count : this。数据。页数} }).然后(RES={控制台。日志(RES)如果(这。数据。page _ index==1){ this。setdata({ index video : RES . result。列表[0]})}//请求接口的数据和每次获取条数如果不相等，说明后面已经没有数据了is hawedata : false if(RES . result。名单。长度！=这个。数据。page _ count){这个。setdata({ ishawedata : false })}这。setdata({ isrequest : false，videoList: [.this.data.videoList，res.result.list]，}) }) }，//滑动切换视频swiperVideo(e){ //这里的录像的简称是视频的id，因为这里我是用接口传数据的，里面有视频id let vid=` video _ $ { e . detail。current } `；//上个一视频id var prev _ id=this。数据。视频_ id//停止山一个视频播放wx.createVideoContext(prev_id).pause()；这个。setdata({第一个请求： false，video_id:vid，isPlay:true }) //延迟500毫秒，再播放本视频setTimeout(函数(){ wx。createvideocontext(vid)).play()；},500) }, })
以上是主要代码部分，如有不明白的留言，相互探讨交流
（完结)
下面是我的小程序实现的效果，可以扫码看看，也可以微信搜索小程序名《最新热门信息汇总》
