快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)抖音播放效果的實(shí)例代碼

更新時(shí)間：2020年04月11日 15:53:48 作者：給我盤(pán)他

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)抖音播放效果的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最近項(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;
}