微信小程序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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
javascript iframe内的函数调用实现方法
Jul 19 Javascript
表格 隔行换色升级版
Nov 07 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 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 selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
php下获取http状态的实现代码
2014/05/09 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Python实现简单的四则运算计算器
2016/11/02 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python AES加密实例解析
2018/01/18 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
简单了解Django项目应用创建过程
2020/07/06 Python
Unix如何在一行中运行多个命令
2015/05/29 面试题
交通安全标语
2014/06/06 职场文书
三潭印月的导游词
2015/02/12 职场文书
初中思想品德教学反思
2016/02/24 职场文书
Java无向树分析 实现最小高度树
2022/04/09 Javascript