快捷導(dǎo)航

微信小程序swiper組件實(shí)現(xiàn)抖音翻頁切換視頻功能的實(shí)例代碼

更新時(shí)間：2020年06月24日 09:27:10 作者：19981205老TP

這篇文章主要介紹了微信小程序swiper組件實(shí)現(xiàn)抖音翻頁切換視頻功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

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

有其他需求也可用 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ǔ)庫 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實(shí)現(xiàn)整屏劃動(dòng)播放視頻-->
<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背景色 否則翻頁的時(shí)候會(huì)有白影 影響效果 -->

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({
 /**
  * 頁面的初始數(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: "/*視頻地址*/"
  }]
 },
 //劃動(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
    // 通過操作系統(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)抖音翻頁切換視頻功能的實(shí)例代碼的文章就介紹到這了,更多相關(guān)微信小程序?qū)崿F(xiàn)抖音翻頁切換視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: