微信小程序实现抖音播放效果的方法
这篇文章主要讲解了微信小程序实现抖音播放效果的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
十余年的沙雅网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整沙雅建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“沙雅网站设计”,“沙雅网站推广”以来,每个客户项目都认真落实执行。
最近项目要做一个类似于抖音的一个视频播放 需要小程序完成
在再次确定了需要这个需求的情况下就开始了(其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化)
然后就开始啦
思路使用微信的 swiper 完成竖向滑动 然后分页加载首先先加载一次加载10个当滑动到第7个的时候加载下一页 (要处理自动播放的问题和加载多个有多个同时播放的问题)
效果图
代码
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; /* border: 1px dashed red; */ } .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}}" 这个起到的是控制加载要不会多个同时播放没刷到的也会播放 现在只会播放当前页面视频
看完上述内容,是不是对微信小程序实现抖音播放效果的方法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。
新闻标题:微信小程序实现抖音播放效果的方法
文章分享:http://ybzwz.com/article/jhoeod.html