微信小程序上线前_微信小程序完成抖音播放效果

微信小程序实现抖音播放效果的实例代码       这篇文章主要介绍了微信小程序实现抖音播放效果的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

最近项目要做一个类似于抖音的一个视频播放 需要小程序完成

在再次确定了需要这个需求的情况下就开始了（其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化）

然后就开始啦

思路使用微信的 swiper 完成竖向滑动 然后分页加载首先先加载一次加载10个当滑动到第7个的时候加载下一页 （要处理自动播放的问题和加载多个有多个同时播放的问题）

效果图

代码

 swiper vertical='true' easing-function='default' bindchange='bindchange' 
 block wx:for="{{weishipinglist}}" wx:for-item="key" wx:key="*this" 
 swiper-item 
 view 
 video wx:if="{{index==hkindex}}" 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 bindtap="click" {{index}} /button 
 /view 
 /swiper-item 
 /block 
 /swiper 

if (e.detail.current%10 == 7) { this.chaxunzhi(); //此处是表示在快要加载完了需在分页请求加载 },

完了需要注意的就是一个分页加载 我设置的是7因为我们数据是一页10条 会在第7条加载第二页数据

wx:if="{{index==hkindex}}" 这个起到的是控制加载要不会多个同时播放没刷到的也会播放 现在只会播放当前页面视频

总结

到此这篇关于微信小程序实现抖音播放效果的实例代码的文章就介绍到这了,更多相关微信小程序抖音播放内容请搜索凡科以前的文章或继续浏览下面的