這篇文章主要講解了微信小程序?qū)崿F(xiàn)抖音播放效果的方法,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
最近項(xiàng)目要做一個(gè)類似于抖音的一個(gè)視頻播放 需要小程序完成
在再次確定了需要這個(gè)需求的情況下就開始了(其實(shí)因?yàn)椴皇钦f這個(gè)功能不好做主要是但心做出來肯定不流暢 卡頓什么的 優(yōu)化不好優(yōu)化)
然后就開始啦
思路使用微信的 swiper 完成豎向滑動(dòng) 然后分頁加載首先先加載一次加載10個(gè)當(dāng)滑動(dòng)到第7個(gè)的時(shí)候加載下一頁 (要處理自動(dòng)播放的問題和加載多個(gè)有多個(gè)同時(shí)播放的問題)
效果圖
代碼
<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>
當(dāng)前題目:微信小程序?qū)崿F(xiàn)抖音播放效果的方法-創(chuàng)新互聯(lián)
瀏覽地址:http://www.rwnh.cn/article40/dcogeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、用戶體驗(yàn)、云服務(wù)器、小程序開發(fā)、App開發(fā)、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)