微信小程序swiper組件實現(xiàn)抖音翻頁切換視頻功能的實例代碼
微信小程序用swiper組件實現(xiàn)仿抖音短視頻上下劃動整頁切換視頻功能demo
利用swiper組件可簡單快速編寫仿抖音短視頻的功能 自動播放當(dāng)前頁視頻 翻頁停止播放當(dāng)前頁視頻 并自動播放下頁視頻
有其他需求也可用 cover-view 添加 收藏 點贊 評論等功能
效果圖:
video官方介紹: https://developers.weixin.qq.com/miniprogram/dev/component/video.html
swiper官方介紹: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
注: 官方一篇文檔介紹, 基礎(chǔ)庫 2.4.4 以下版本, video (原生) 組件不支持在 swiper 中使用
介紹: https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
臭豆腐 腐乳 加檸檬 上代碼就完了 奧利給 ! ! ! (里面有自定義導(dǎo)航欄的代碼 但不多 參考著康康... 吼吼吼...)
wxml:
<!-- 自定義頭部導(dǎo)航欄 --> <cover-view style="height:{{statusBarHeight+navBarHeight}}px"> <navigator open-type="navigateBack"> <cover-image src="../../icon/返回.png" /> <!--填寫自己的圖標(biāo)地址--> </navigator> </cover-view> <!--swiper實現(xiàn)整屏劃動播放視頻--> <swiper vertical duration="200" bindchange="slide" style="height:{{screenHeight}}px; width:100%;background:#000"> <block wx:for="{{video}}" wx:key="id"> <swiper-item style="height:100%; width:100%"> <video wx:if="{{index==changeIndex}}" style="height:100%; width:100%" src="{{item.video}}" autoplay="true" /> </swiper-item> </block> </swiper> <!-- swiper中background:#000; 設(shè)置swiper背景色 否則翻頁的時候會有白影 影響效果 -->
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)用實例 const app = getApp() Page({ /** * 頁面的初始數(shù)據(jù) */ 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: "/*視頻地址*/" }] }, //劃動切換 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 // 通過操作系統(tǒng) 確定自定義導(dǎo)航欄高度 if (res.system.substring(0, 3) == "iOS") { this.navBarHeight = 42 } else { this.navBarHeight = 44 } } }) } })
總結(jié)
到此這篇關(guān)于微信小程序swiper組件實現(xiàn)抖音翻頁切換視頻功能的實例代碼的文章就介紹到這了,更多相關(guān)微信小程序?qū)崿F(xiàn)抖音翻頁切換視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript函數(shù)自動執(zhí)行常用方法匯總
本文給大家匯總介紹了3種javascript函數(shù)自動執(zhí)行的常用方法,非常的簡單實用,有需要的小伙伴可以參考下2016-03-03防止Layui form表單重復(fù)提交的實現(xiàn)方法
今天小編就為大家分享一篇防止Layui form表單重復(fù)提交的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]
長久以來JavaScript兼容性一直是Web開發(fā)者的一個主要問題。在正式規(guī)范、事實標(biāo)準(zhǔn)以及各種實現(xiàn)之間的存在的差異讓許多開發(fā)者日夜煎熬2011-10-10將json轉(zhuǎn)換成struts參數(shù)的方法
下面小編就為大家?guī)硪黄獙son轉(zhuǎn)換成struts參數(shù)的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11