时间:2021-05-18
最近项目要做一个类似于抖音的一个视频播放 需要小程序完成
在再次确定了需要这个需求的情况下就开始了(其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化)
然后就开始啦
思路使用微信的 swiper 完成竖向滑动 然后分页加载首先先加载一次加载10个当滑动到第7个的时候加载下一页 (要处理自动播放的问题和加载多个有多个同时播放的问题)
效果图
代码
<swiper class="swiper" vertical='true' easing-function='default' bindchange='bindchange'> <block wx:for="{{weishipinglist}}" wx:for-item="key" wx:key="*this"> <swiper-item> <view class="video-wrap"> <video wx:if="{{index==hkindex}}" class="video" autoplay="{{true}}" lopp='{{true}}' src="{{key.videoid}}" enable-play-gesture='{{true}}' show-fullscreen-btn='{{false}}' controls='{{false}}' vslide-gesture-in-fullscreen='{{false}}' show-play-btn='{{false}}' enable-progress-gesture='{{false}}' show-mute-btn='{{false}}'></video> <button class="buy" bindtap="click">{{index}}</button> </view> </swiper-item> </block></swiper>data: { weishipinglist: [],//视频数据 hkindex: 0,//滑块index }, //动态更新当前滑块下标 bindchange(e) { this.setData({ hkindex: e.detail.current }) if (e.detail.current%10 == 7) { this.chaxunzhi(); //此处是表示在快要加载完了需在分页请求加载 } },//css代码可能有多余的 我就不挑了 引入时自己按需引入吧page { width: 100%; height: 100%;}.video-wrap { width: 100%; height: 100%; position: relative; }.video-wrap video { width: 100%; height: 100%; position: absolute; top: 0px; left: 0; z-index: 1;}.video-wrap .buy { width: 100rpx; height: 100rpx; line-height: 100rpx; border-radius: 50%; position: absolute; z-index: 100; bottom: 100rpx; left: 50rpx; font-size: 11pt; text-align: center; padding: 0px;}.swiper { width: 100%; height: 100%;}.tentbiaot { width: 400rpx; font-size: 30rpx; color: #fff; z-index: 99; white-space: normal; line-height: 40rpx; margin-top: 20rpx;}.diwen { width: 400rpx; color: #fff; z-index: 99; display: flex; align-items: center;}.toixaign { width: 50rpx; height: 50rpx; border-radius: 50rpx; margin-right: 10rpx;}.teiename { font-size: 34rpx; margin-right: 10rpx;}.diwe { display: flex; position: fixed; bottom: 100rpx; flex-direction: column; z-index: 99; left: 40rpx;}.dianzaidijila { width: 100rpx; position: fixed; right: 30rpx; bottom: 80rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 99;}.tuaobiao { display: flex; align-items: center; flex-direction: column; justify-content: center; margin-bottom: 30rpx;}.tobimg{ width: 60rpx; height: 50rpx;}.tobimglw{ width: 60rpx; height: 60rpx; margin-bottom: 20rpx;}.zitiet{ color: #fff; font-size: 26rpx; margin-top: 6rpx;}.zhaunfanan { width: 60rpx; height: 50rpx; padding: 0rpx; border: none !important; line-height: 0rpx;}.zhaunfananas { width: 60rpx; height: 50rpx;}完了需要注意的就是一个分页加载 我设置的是7因为我们数据是一页10条 会在第7条加载第二页数据
wx:if="{{index==hkindex}}" 这个起到的是控制加载要不会多个同时播放没刷到的也会播放 现在只会播放当前页面视频
总结
到此这篇关于微信小程序实现抖音播放效果的实例代码的文章就介绍到这了,更多相关微信小程序抖音播放内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序利用css实现遮罩效果实例详解实现效果图:如图所示,使用css实现小程序的遮罩效果,代码如下js文件代码://index.js//获取应用实例vara
微信小程序用swiper组件实现仿抖音短视频上下划动整页切换视频功能demo利用swiper组件可简单快速编写仿抖音短视频的功能自动播放当前页视频翻页停止播放当
本文实例为大家分享了微信小程序实现跟随菜单效果、微信小程序循环嵌套加载数据,供大家参考,具体内容如下效果如图:代码如下:wxml//使用循环嵌套data数据格式
本文实例讲述了微信小程序使用video组件播放视频功能。分享给大家供大家参考,具体如下:1、效果展示2、关键代码①index.wxml复制代码代码如下:②ind
问题描述在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现。解决方案首先用.wxml与.wmss代码实现进度条的效果,再通