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

 

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

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

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

 

效果图:

 

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

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

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

介绍: https://developers.weixin.qq.com/miniprogram/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
        }
      }
    })
  }
})

End

2020/10/20 注：

文中app.js中自定义导航栏高度适配的并不完美

如需完美适配 详情见https://blog.csdn.net/TP19981017/article/details/109147265