微信小程序实现抖音切换视频效果

思路：

使用微信小程序的swiper组件，使其竖向滑动
分页加载，每次加载3个视频，当滑动到只剩1个视频时加载下一页

问题：

加载多个视频时，多个视频会同时播放

效果图：
代码：

index.json文件：

{"usingComponents": {},"navigationStyle":"custom","navigationBarTextStyle":"white"
}

**

**-

index.wxml文件：

**
wx:if="{{index==q_videoIndex}}" 用于控制只播放当前视频，否则多个视频会同时播放没刷到的也会播放

<!--index.wxml-->
<swiper class="q_swiper" circular="{{true}}" vertical="{{true}}" bindchange="q_swiperBindchange"><block wx:for="{{q_videos}}" wx:key="q_videos"><swiper-item><view class="q_videoView"><!-- wx:if="{{index==q_videoIndex}}" 用于控制只播放当前视频，否则多个视频会同时播放没刷到的也会播放 --><video wx:if="{{index==q_videoIndex}}" src="{{item.url}}" autoplay="{{true}}" loop="{{true}}" show-fullscreen-btn="{{false}}" play-btn-position="center" enable-play-gesture="{{true}}"></video></view></swiper-item></block>
</swiper>

index.wxss文件：

/**index.wxss**/
page{width: 100%;height: 100%;
}.q_swiper{width: 100%;height: 100%;background-color: #000;
}.q_videoView{width: 100%;height: 100%;position: relative;
}.q_videoView video{width: 100%;height: 100%;position: absolute;top: 0;left: 0;
}

index.js文件：

videoList内的视频地址为临时地址，届时视频链接可能失效，如果视频链接失效，您只需自己随意找几个视频替换掉地址即可

//index.js
Page({/*** 页面的初始数据*/data: {q_videos: [], //视频q_videoIndex: 0, //视频indexq_yjz: false, //是否允许预加载},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// videoList内的视频地址为临时地址，届时视频链接可能失效，如果视频链接失效，您只需自己随意找几个视频替换掉地址即可var videoList = [{id: '1',url: "http://sns-1255549670.cos.ap-guangzhou.myqcloud.com/tmp_29f5566f128e9a4ee470f30c310b63678b7e786e2ab03ac2.mp4?0.42363964325301695",}, {id: '2',url: "http://sns-1255549670.cos.ap-guangzhou.myqcloud.com/tmp_4eeae5bfcad7f75ec481b5ad87f4a9102ea7c735df672d18.mp4?0.9295834871549054",}, {id: '3',url: "http://sns-1255549670.cos.ap-guangzhou.myqcloud.com/tmp_7a9caafe0a37a460686fcf2a4a6dc492e0e44119c10cc47b.mp4?0.401603295588834",}]this.setData({q_videos: videoList, //视频// 每次加载3个视频，当获取的视频数量小于3时，证明没有后续视频了，也就不需要在进行预加载了q_yjz: videoList.length < 3 ? false : true, //是否允许预加载})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},//动态更新当前视频下标q_swiperBindchange: function (e) {console.log('当前视频下标：', e.detail.current)this.setData({q_videoIndex: e.detail.current})// 当加载的视频还剩1个未被滑到时加载下一页if (this.data.q_videos.length - (e.detail.current + 1) == 1 && this.data.q_yjz) {this.q_yjzVideos() //预加载视频}},//预加载视频q_yjzVideos: function () {console.log('预加载视频')var videoList = [{id: '4',url: "http://sns-1255549670.cos.ap-guangzhou.myqcloud.com/tmp_b0855d9c92f6ce4cd91796e8b1ca39a78bca4d48f524bb06.mp4?0.27723747875520743",}, {id: '5',url: "http://sns-1255549670.cos.ap-guangzhou.myqcloud.com/wx982ed8d3473ced2c.o6zAJs8Oghy9CSGBPJEdSoJABPEU.SZVa80OoOknW8750107432d93943f9ce930651ad5ffa.mp4?0.27723747875520743",}]var array = this.data.q_videos.concat(videoList) //concat() 方法：用于连接两个或多个数组,并返回一个新数组this.setData({q_videos: array, //视频q_yjz: videoList.length < 3 ? false : true, //是否允许预加载})},
})

转载：https://www.jianshu.com/p/e75054c1adef

微信小程序实现抖音切换视频效果相关推荐

微信小程序——仿抖音短视频切换效果
一直以为抖音短视频切换假如用小程序做的话应该是比较简单的,直接用swiper实现就好,但在实际写的过程中才发现没那么简单,要控制的逻辑还是挺多的. 还是先看效果体验路径自定义组件系列>> ...
微信小程序仿抖音上下滑动整屏切换视频
微信小程序仿抖音上下滑动整屏切换视频使用官网上面的扩展组件官方使用的方式: 可结合自己业务修改: 使用官网上面的扩展组件 https://developers.weixin.qq.com/mini ...
17_微信小程序之抖音微视无限滑动视频列表自定义组件编写
微信小程序之抖音微视无限滑动视频列表自定义组件编写一.先上效果图看到上面,你可能首先会想到,使用swiper然后将swiper的circular设置为true,那么,想象一下,假如视频很多的情况下 ...
微信小程序仿抖音视频
微信小程序仿抖音视频使用轮播图实现视频滑动效果. wxml 部分 <view class="video-contain">&l ...
微信小程序和抖音小程序的区别？如何选择？
随着5G的到来,电商向多元化新型电商的转型也已成时代必然.2020年,当我们的Vlog.自媒体行业风生水起时,依托第三方的电商平台销售模式已经逐渐难以满足新型电商的应用场景,例如微信的私域流量.抖音对 ...
从微信小程序到抖音小程序：转换指南
抖音小程序是一种新兴的小程序平台,与微信小程序类似,都是基于小程序框架的开发,不过两者的开发环境和API有所不同.如果你已经开发了一款微信小程序,想要将其转换为抖音小程序,可以按照以下步骤进行: 1. ...
微信小程序与抖音小程序的区别
1. 前缀区别:tt 与 wx 2. 调用前一个页面的方法时微信小程序 let pages = getCurrentPages(); let prePage = pages[pages.length ...
微信小程序仿抖音项目实战说明
功能说明短视频管理后台: 1.bgm管理(增删改查.文件上传.点击播放) 2.用户列表 3.举报管理 4.用户视频管理因为微信端Api接口管理后台是围绕微信端功能做的,所以这里我就将功能列举到一起 ...
微信小程序点击卡片切换动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: html <view class='aa'><image animation=&qu ...

微信小程序实现抖音切换视频效果

微信小程序实现抖音切换视频效果

微信小程序实现抖音切换视频效果相关推荐

最新文章

热门文章