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


Posted in Javascript onJune 24, 2020

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

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

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

效果图:

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

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

总结

到此这篇关于微信小程序swiper组件实现抖音翻页切换视频功能的实例代码的文章就介绍到这了,更多相关微信小程序实现抖音翻页切换视频内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
javascript实现前端成语点击验证优化
Jun 24 #Javascript
vue各种事件监听实例(小结)
Jun 24 #Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 #Javascript
javascript实现前端成语点击验证
Jun 24 #Javascript
vue单文件组件无法获取$refs的问题
Jun 24 #Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 #Javascript
javascript实现评分功能
Jun 24 #Javascript
You might like
PHP 超链接 抓取实现代码
2009/06/29 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
Node.js中的流(Stream)介绍
2015/03/30 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
vue中的inject学习教程
2019/04/24 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
python实现祝福弹窗效果
2019/04/07 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
python元组拆包实现方法
2021/02/28 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
往来会计岗位职责
2013/12/19 职场文书
中学自我评价
2014/01/31 职场文书
优秀班集体申报材料
2014/12/25 职场文书
学校运动会简讯
2015/07/20 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android