微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

时间:2020-06-24 19981205老TP 人气:0

本文着重讲解了微信小程序swiper组件实现抖音翻页切换视频功能,文中会用代码示例为大家做详细介绍，希望能够帮助到您，欢迎大家阅读和收藏

微信小程序用swiper组件实现仿抖音短视频上下划动整页切换视频功能demo

利用swiper组件可简单快速编写仿抖音短视频的功能自动播放当前页视频翻页停止播放当前页视频并自动播放下页视频

有其他需求也可用 cover-view 添加收藏点赞评论等功能

效果图:

video官方介绍: https:/https://img.qb5200.com/download-x/developers.weixin.qq.com/miniprogramhttps://img.qb5200.com/download-x/dev/component/video.html

swiper官方介绍: https:/https://img.qb5200.com/download-x/developers.weixin.qq.com/miniprogramhttps://img.qb5200.com/download-x/dev/component/swiper.html

注: 官方一篇文档介绍, 基础库 2.4.4 以下版本, video (原生) 组件不支持在 swiper 中使用

介绍: https:/https://img.qb5200.com/download-x/developers.weixin.qq.com/miniprogramhttps://img.qb5200.com/download-x/dev/component/native-component.html

臭豆腐腐乳加柠檬上代码就完了奥利给 ! ! ! (里面有自定义导航栏的代码但不多参考着康康... 吼吼吼...)

wxml:

<!-- 自定义头部导航栏 -->
<cover-view style="height:{{statusBarHeight+navBarHeight}}px">
 <navigator open-type="navigateBack">
  <cover-image src="../../icon/返回.png" /> <!--填写自己的图标地址-->
 </navigator>
</cover-view>
 
<!--swiper实现整屏划动播放视频-->
<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; 设置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:

//获取应用实例
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)
 }
})

app.js

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

总结

加载全部内容