微信小程序用swiper組件實(shí)現(xiàn)仿抖音短視頻上下劃動(dòng)整頁(yè)切換視頻功能demo

利用swiper組件可簡(jiǎn)單快速編寫(xiě)仿抖音短視頻的功能 自動(dòng)播放當(dāng)前頁(yè)視頻 翻頁(yè)停止播放當(dāng)前頁(yè)視頻 并自動(dòng)播放下頁(yè)視頻

有其他需求也可用 cover-view 添加 收藏 點(diǎn)贊 評(píng)論等功能

效果圖:

video官方介紹: https://developers.weixin.qq.com/miniprogram/dev/component/video.html

swiper官方介紹: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

注: 官方一篇文檔介紹, 基礎(chǔ)庫(kù) 2.4.4 以下版本, video (原生) 組件不支持在 swiper 中使用

介紹: https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

臭豆腐 腐乳 加檸檬 上代碼就完了 奧利給 ! ! ! (里面有自定義導(dǎo)航欄的代碼 但不多 參考著康康... 吼吼吼...)

wxml:

wxss:

cover-view {

width: 100%;

position: fixed;

z-index: 999;

}

cover-image {

width: 17px;

height: 17px;

margin-left: 8px;

padding-right: 20px;

position: absolute;

bottom: 11px;

}

json:

{

"navigationBarTextStyle": "white",

"navigationStyle": "custom",

"usingComponents": {}

}

js:

//獲取應(yīng)用實(shí)例

const app=getApp()

Page({

data: {

screenHeight: app.screenHeight,//獲取屏幕高度

statusBarHeight: app.statusBarHeight,//獲取狀態(tài)欄高度

navBarHeight: app.navBarHeight,//獲取導(dǎo)航欄高度

changeIndex: 0,

video: [{

id: 0,

video: ""

}, {

id: 1,

video: ""

}, {

id: 2,

video: ""

}]

},

//劃動(dòng)切換

slide(e) {

this.setData({

changeIndex: e.detail.current

})

console.log(e.detail.current)

}

})

app.js

App({

onLaunch: function() {

// 獲取系統(tǒng)信息

wx.getSystemInfo({

success: (res)=> {

// 獲取屏幕高度

this.screenHeight=res.screenHeight

// 獲取狀態(tài)欄高度

this.statusBarHeight=res.statusBarHeight

// 通過(guò)操作系統(tǒng) 確定自定義導(dǎo)航欄高度

if (res.system.substring(0, 3)=="iOS") {

this.navBarHeight=42

} else {

this.navBarHeight=44

}

}

})

}

})

總結(jié)

到此這篇關(guān)于微信小程序swiper組件實(shí)現(xiàn)抖音翻頁(yè)切換視頻功能的實(shí)例代碼的文章就介紹到這了,更多相關(guān)微信小程序?qū)崿F(xiàn)抖音翻頁(yè)切換視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:微信小程序仿抖音視頻之整屏上下切換功能的實(shí)現(xiàn)代碼詳解微信小程序Radio選中樣式切換微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換微信小程序左右滑動(dòng)切換頁(yè)面詳解及實(shí)例代碼微信小程序開(kāi)發(fā)之實(shí)現(xiàn)選項(xiàng)卡(窗口頂部TabBar)頁(yè)面切換微信小程序仿抖音短視頻切換效果的實(shí)例代碼