真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

微信小程序?qū)崿F(xiàn)抖音播放效果的方法

這篇文章主要講解了微信小程序?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è)視頻播放 需要小程序完成

微信小程序?qū)崿F(xiàn)抖音播放效果的方法

在再次確定了需要這個(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í)播放的問題)

效果圖

微信小程序?qū)崿F(xiàn)抖音播放效果的方法

代碼


	
		
			
				
				  
			
		
	
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è)資訊頻道。


網(wǎng)站標(biāo)題:微信小程序?qū)崿F(xiàn)抖音播放效果的方法
鏈接地址:http://weahome.cn/article/jhoeod.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部