微信抖音短视频教程，抖音微信信息视频教程

1、wxml部分代码 ，主要是利用swiper 标签滑动切换，事件处理，具体参数说明可以去小程序官网文档查看。https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

<swiper vertical="{{true}}" current="{{current}}" circular="{{false}}" bindchange="bindchange" easing-function="default"> <block wx:for="{{videoList}}" wx:key="*this" wx:for-index="i"> <swiper-item> <view class="swiper-item"> <video bindtap="clickVideo" object-fit="cover" id="video_{{i}}" show-fullscreen-btn="{{false}}" autoplay="{{i==0 && firstRequest}}" wx:if="{{i>current-2 && current+2>i}}" loop="{{true}}" src="{{item.video_url}}" class="video-dom"> </video> <!-- i>current-2 && current+2>i 这个判断的作用是，加载当前视频和前面一个和后面一个视频资源， 不多加载，做到按需加载，节流--><!-- autoplay="{{i==0 && firstRequest}}" 首次打开的时候，第一个视频自动播放，其它的滑动的时候触发播放 --> </view> </swiper-item> </block> </swiper>

2、js 部分

Page({ /** * 页面的初始数据 */ 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: function (options) { this.getShortVideo(); }, // current 改变时会触发 change 事件 bindchange(e){ this.setData({ current: e.detail.current }) this.swiperVideo(e); if(this.data.isHaveData && e.detail.current >= this.data.videoList.length-2 && !this.data.isRequest){ this.setData({ page_index: this.data.page_index+1 },res=>{ this.setData({ offset: (this.data.page_index-1) * this.data.page_count, isRequest: true, }) this.getShortVideo(); }) } }, // 点击视频暂停活播放 clickVideo(e){ //这里的vid是视频的id，因为这里我是用接口传数据的，里面有视频id let vid = e.currentTarget.id; let indexVideoContext = wx.createVideoContext(vid) if(this.data.isPlay){ indexVideoContext.pause(); }else{ indexVideoContext.play(); } this.setData({ isPlay: !this.data.isPlay }) }, // 获取视频列表 getShortVideo(){ wx.cloud.callFunction({ name:"short-video", data:{ type:"checkList", offset: this.data.offset, page_count: this.data.page_count } }).then(res=>{ console.log(res) if(this.data.page_index==1){ this.setData({ indexVideo:res.result.list[0] }) } // 请求接口的数据和每次获取条数如果不相等，说明后面已经没有数据了 isHaveData: false if(res.result.list.length!=this.data.page_count){ this.setData({ isHaveData:false }) } this.setData({ isRequest: false, videoList: [ ...this.data.videoList, ...res.result.list], }) }) }, // 滑动切换视频 swiperVideo(e){ //这里的vid是视频的id，因为这里我是用接口传数据的，里面有视频id let vid = `video_${e.detail.current}`; // 上个一视频id var prev_id = this.data.video_id; // 停止山一个视频播放 wx.createVideoContext(prev_id).pause(); this.setData({ firstRequest:false, video_id:vid, isPlay:true }) // 延迟500ms，再播放本视频 setTimeout(function(){ wx.createVideoContext(vid).play(); },500) }, })

以上是主要代码部分，如有不明白的留言，相互探讨交流

（完结）

下面是我的小程序实现的效果，可以扫码看看，也可以微信搜索小程序名《最新热门信息汇总》

p>微信抖音短视频教程，抖音微信信息视频教程

1、wxml部分代码 ，主要是利用swiper 标签滑动切换，事件处理，具体参数说明可以去小程序官网文档查看。https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

<swiper vertical="{{true}}" current="{{current}}" circular="{{false}}" bindchange="bindchange" easing-function="default"> <block wx:for="{{videoList}}" wx:key="*this" wx:for-index="i"> <swiper-item> <view class="swiper-item"> <video bindtap="clickVideo" object-fit="cover" id="video_{{i}}" show-fullscreen-btn="{{false}}" autoplay="{{i==0 && firstRequest}}" wx:if="{{i>current-2 && current+2>i}}" loop="{{true}}" src="{{item.video_url}}" class="video-dom"> </video> <!-- i>current-2 && current+2>i 这个判断的作用是，加载当前视频和前面一个和后面一个视频资源， 不多加载，做到按需加载，节流--><!-- autoplay="{{i==0 && firstRequest}}" 首次打开的时候，第一个视频自动播放，其它的滑动的时候触发播放 --> </view> </swiper-item> </block> </swiper>

2、js 部分

Page({ /** * 页面的初始数据 */ 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: function (options) { this.getShortVideo(); }, // current 改变时会触发 change 事件 bindchange(e){ this.setData({ current: e.detail.current }) this.swiperVideo(e); if(this.data.isHaveData && e.detail.current >= this.data.videoList.length-2 && !this.data.isRequest){ this.setData({ page_index: this.data.page_index+1 },res=>{ this.setData({ offset: (this.data.page_index-1) * this.data.page_count, isRequest: true, }) this.getShortVideo(); }) } }, // 点击视频暂停活播放 clickVideo(e){ //这里的vid是视频的id，因为这里我是用接口传数据的，里面有视频id let vid = e.currentTarget.id; let indexVideoContext = wx.createVideoContext(vid) if(this.data.isPlay){ indexVideoContext.pause(); }else{ indexVideoContext.play(); } this.setData({ isPlay: !this.data.isPlay }) }, // 获取视频列表 getShortVideo(){ wx.cloud.callFunction({ name:"short-video", data:{ type:"checkList", offset: this.data.offset, page_count: this.data.page_count } }).then(res=>{ console.log(res) if(this.data.page_index==1){ this.setData({ indexVideo:res.result.list[0] }) } // 请求接口的数据和每次获取条数如果不相等，说明后面已经没有数据了 isHaveData: false if(res.result.list.length!=this.data.page_count){ this.setData({ isHaveData:false }) } this.setData({ isRequest: false, videoList: [ ...this.data.videoList, ...res.result.list], }) }) }, // 滑动切换视频 swiperVideo(e){ //这里的vid是视频的id，因为这里我是用接口传数据的，里面有视频id let vid = `video_${e.detail.current}`; // 上个一视频id var prev_id = this.data.video_id; // 停止山一个视频播放 wx.createVideoContext(prev_id).pause(); this.setData({ firstRequest:false, video_id:vid, isPlay:true }) // 延迟500ms，再播放本视频 setTimeout(function(){ wx.createVideoContext(vid).play(); },500) }, })

以上是主要代码部分，如有不明白的留言，相互探讨交流

（完结）

下面是我的小程序实现的效果，可以扫码看看，也可以微信搜索小程序名《最新热门信息汇总》

​

​

标签： 视频教程 视频 效果