微信小程序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 相关文章推荐
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
关于uniApp editor微信滑动问题
Jan 15 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文件中bom的PHP代码
2012/03/13 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
js 操作符汇总
2014/11/08 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
vue的mixins属性详解
2018/03/14 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python and、or以及and-or语法总结
2015/04/14 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python面试题小结附答案实例代码
2019/04/11 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
法学专业求职信范文
2015/03/19 职场文书
公司新员工欢迎词
2015/09/30 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
Java数据结构之堆(优先队列)
2022/05/20 Java/Android