操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

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

微信小程序用組件實現仿抖音短視頻上下劃動整頁切換視頻功能demo

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

有其他需求也可用 cover-view 添加 收藏 點贊 評論等功能

效果圖:

video官方介紹:

官方介紹:

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

介紹:

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

wxml:

www.cppcns.comght+navBarHeight}}px">
 
   
 


 

 
  
   
 

 

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;
}

on:

{
 "navigationBarTextStyle": "white",
 "navigationStyle": "custom",
 "usingComponents": {}
}

js:

//獲取應用實例
const app = getApp()
 
Page({
 /**
  * 頁面的初始數據
  */
 data: {
  screenHeight: app.screenHeight,//獲取屏幕高度
  statusBarHeight: app.statusBarHeight,//獲取狀態欄高度
  navBarHeight: app.navBarHeight,//獲取導航欄高度
  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)
 }
http://www.cppcns.com})

app.

App({
 onLaunch: function() {
  // 獲取系統信息 

  wx.getSystemInfo({
   success: (res) => {
    // 獲取屏幕高度
    this.screenHeight = res.screenHeight
    // 獲取狀態欄高度
    this.statusBarHeight = res.statusBarHeight
    // 通過操作系統 確定自定義導航欄高度 
    if (res.system.substring(0, 3) == "iOS") {
     this.navBarHeight = 42
    } else {
     this.navBarHeight = 44
    }
   }
  })
 }
})

總結

到此這篇關于微信小程序組件實現抖音翻頁切換視頻功能的實例代碼的文章就介紹到這了,更多相關微信小程序實現抖音翻頁切換視頻內容請搜索我們以前的文章或繼續瀏iZwsf覽下面的相關文章希望大家以后多多支持我們！

本文標題: 微信小程序組件實現抖音翻頁切換視頻功能的實例代碼