這篇文章主要講解了微信小程序?qū)崿F(xiàn)抖音播放效果的方法,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
十余年的沙雅網(wǎng)站建設(shè)經(jīng)驗(yàn),針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù),響應(yīng)快,48小時(shí)及時(shí)工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動(dòng)調(diào)整沙雅建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“沙雅網(wǎng)站設(shè)計(jì)”,“沙雅網(wǎng)站推廣”以來,每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
最近項(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í)播放的問題)
效果圖
代碼
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(); //此處是表示在快要加載完了需在分頁請求加載 } },
//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è)分頁加載 我設(shè)置的是7因?yàn)槲覀償?shù)據(jù)是一頁10條 會(huì)在第7條加載第二頁數(shù)據(jù)
wx:if="{{index==hkindex}}" 這個(gè)起到的是控制加載要不會(huì)多個(gè)同時(shí)播放沒刷到的也會(huì)播放 現(xiàn)在只會(huì)播放當(dāng)前頁面視頻
看完上述內(nèi)容,是不是對微信小程序?qū)崿F(xiàn)抖音播放效果的方法有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。