DDR爱好者之家 Design By 杰米
最近项目要做一个类似于抖音的一个视频播放 需要小程序完成
在再次确定了需要这个需求的情况下就开始了(其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化)
然后就开始啦
思路使用微信的 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="/UploadFiles/2021-04-02/{{key.videoid}}">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}}" 这个起到的是控制加载要不会多个同时播放没刷到的也会播放 现在只会播放当前页面视频
总结
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年12月27日
2024年12月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]