微信小程序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 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
JS内部事件机制之单线程原理
Jul 02 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 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 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
div层的移动及性能优化
2010/11/16 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
python实现数组插入新元素的方法
2015/05/22 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
Python多线程爬虫简单示例
2016/03/04 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
Python格式化日期时间操作示例
2018/06/28 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
在python中用url_for构造URL的方法
2019/07/25 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
小学优秀班干部事迹材料
2014/05/25 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
工人先锋号申报材料
2014/12/29 职场文书
django 认证类配置实现
2021/11/11 Python