您好,登錄后才能下訂單哦!
這篇文章主要講解了微信小程序?qū)崿F(xiàn)抖音播放效果的方法,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
最近項(xiàng)目要做一個(gè)類似于抖音的一個(gè)視頻播放 需要小程序完成
在再次確定了需要這個(gè)需求的情況下就開(kāi)始了(其實(shí)因?yàn)椴皇钦f(shuō)這個(gè)功能不好做主要是但心做出來(lái)肯定不流暢 卡頓什么的 優(yōu)化不好優(yōu)化)
然后就開(kāi)始啦
思路使用微信的 swiper 完成豎向滑動(dòng) 然后分頁(yè)加載首先先加載一次加載10個(gè)當(dāng)滑動(dòng)到第7個(gè)的時(shí)候加載下一頁(yè) (要處理自動(dòng)播放的問(wèn)題和加載多個(gè)有多個(gè)同時(shí)播放的問(wèn)題)
效果圖
代碼
<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: [],//視頻數(shù)據(jù) hkindex: 0,//滑塊index }, //動(dòng)態(tài)更新當(dāng)前滑塊下標(biāo) bindchange(e) { this.setData({ hkindex: e.detail.current }) if (e.detail.current%10 == 7) { this.chaxunzhi(); //此處是表示在快要加載完了需在分頁(yè)請(qǐng)求加載 } },
//css代碼可能有多余的 我就不挑了 引入時(shí)自己按需引入吧 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; }
完了需要注意的就是一個(gè)分頁(yè)加載 我設(shè)置的是7因?yàn)槲覀償?shù)據(jù)是一頁(yè)10條 會(huì)在第7條加載第二頁(yè)數(shù)據(jù)
wx:if="{{index==hkindex}}" 這個(gè)起到的是控制加載要不會(huì)多個(gè)同時(shí)播放沒(méi)刷到的也會(huì)播放 現(xiàn)在只會(huì)播放當(dāng)前頁(yè)面視頻
看完上述內(nèi)容,是不是對(duì)微信小程序?qū)崿F(xiàn)抖音播放效果的方法有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。