微信小程序仿抖音视频之整屏上下切换功能的实现代码


Posted in Javascript onMay 24, 2020

效果演示:

微信小程序仿抖音视频之整屏上下切换功能的实现代码

WXML:

<view class="video_box">
 <view bindtouchend="touchEnd" id="myVideo{{index}}" animation="{{animation}}" bindtouchstart="touchStart" bindtouchmove="touchMove" class="video_list" wx:for="{{video_list}}" data-index="{{index}}" wx:key="index" >
  <text style="color:red;font-size:30px;display:block;">{{index}}</text>
  <video custom-cache="{{false}}" src="{{item.video_src}}" vslide-gesture-in-fullscreen="{{false}}" direction = '{{0}}' enable-progress-gesture="{{false}}" show-fullscreen-btn="{{false}}" object-fit="cover"></video>
 </view>
</view>

WXSS:

.video_box{width: 100%;height: auto;position: fixed;top:0;bottom: 0;background-color: #000;}
.video_list{width: 100%;height: 100vh;position: relative;}
.video_list video{position: absolute;top:50%;margin-top:-30vw; width: 100%;height:56vw;padding: 0;}
Page({
 /**
  * 页面的初始数据
  */
 data: {
  video_list:[
   {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'},
   {video_src:'https://stream7.iqilu.com/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4'},
   {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4'},
   {video_src:'https://stream7.iqilu.com/10339/article/202002/18/2fca1c77730e54c7b500573c2437003f.mp4'},
   {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'},
   {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4'},
   {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4'},
   {video_src:'https://stream7.iqilu.com/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4'},
   {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4'},
   {video_src:'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4'},
  ],
  pageY:'',    // 触摸起始高度坐标
  animation:'',  // 视频划动动画
  up_stroke:false,// ture:上划;false:下划
  difference:'', // 拖动的距离
  windowHeight:'',// 屏幕高度
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  // 赋值:屏幕高度、
  this.setData({
   windowHeight:wx.getSystemInfoSync().windowHeight
  })
 },
 // 划动起始坐标方法
 touchStart(e){
  // 开始坐标
  this.setData({
   pageY:e.touches[0].pageY,
  })
 },
 // 划动过程坐标方法
 touchMove(e){
  let n = e.currentTarget.dataset.index;   // 触摸的第几个序号
  let difference = e.touches[0].pageY - this.data.pageY; // 移动后和起始值的差值
  if(this.is_continue(n,difference)){    // 判断是否到底
   return;
  } 
  // 划动动画 -------------------------------------
  var animation = wx.createAnimation({    // 移动动效
   duration: 0,
  });
  animation.top(difference - (n*this.data.windowHeight)).step()
  this.setData({
   animation: animation.export(),     // 动画
   up_stroke:difference > 0 ? false : true, // 是否上划,
   difference:difference,          // 拖动的距离
  })
 },
 // 划动结束坐标方法
 touchEnd(e){
  let n = e.currentTarget.dataset.index;
  let difference = this.data.difference; // 拖动的距离
  if(this.is_continue(n,difference)){
   return;
  }
  const windowHeight = this.data.windowHeight;   // 屏幕高度
  let that = this;
  // 根据id获取点击元素距顶部高度
  var query = wx.createSelectorQuery();
  let id = '#' + e.currentTarget.id;
  query.select(id).boundingClientRect(function (rect) { // 获取高度
   if(Math.abs(difference) <= windowHeight /7){   // 小于1/7回原位置 ---------------------------
    var animation = wx.createAnimation({ // 移动动效
     duration: 100,
    });
    animation.top(-(n * windowHeight)).step()
    that.setData({
     animation: animation.export(),
     up_stroke:false, // 重置划动状态
     difference:0,   // 重置划动距离
    })
   }else{ // 大于1/4,移至拖动的下一个视频 --------------------------------
    var animation = wx.createAnimation({ // 移动动效
     duration: 200,
    });
    that.data.up_stroke ? n++ : n--;   // 上划:n+1 下划:n-1
    animation.top(-(n * windowHeight)).step()
    that.setData({
     animation: animation.export(),
     up_stroke:false, // 重置划动状态
     difference:0,   // 重置划动距离
    })
   }
  }).exec();
 },
 // 判断是否到底
 is_continue(n,difference){
  if(difference < 0){ // 上划
   if(n == this.data.video_list.length - 1){ // 最后一个视频,提示到底
    if(difference < -20){
     wx.showToast({
      title: '已经到底了~~',
      icon:'none',
      duration:1000
     })
    }
    return true;
   }
  }else{
   if(n == 0){
    if(difference > 20){
     wx.showToast({
      title: '上面没有了~~',
      icon:'none',
      duration:1000
     })
    }
    return true;
   }
  }
 },
})

总结

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

Javascript 相关文章推荐
javascript options属性集合操作代码
Dec 28 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 #Javascript
使用React代码动态生成栅格布局的方法
May 24 #Javascript
ES6对象操作实例详解
May 23 #Javascript
ES6函数和数组用法实例分析
May 23 #Javascript
ES6箭头函数和扩展实例分析
May 23 #Javascript
ES6新增的数组知识实例小结
May 23 #Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 #Javascript
You might like
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python实现的HTTP并发测试完整示例
2020/04/23 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
Python pymongo模块常用操作分析
2018/09/01 Python
Python中安装easy_install的方法
2018/11/18 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
创业计划书如何吸引他人眼球
2014/01/10 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
农村文化活动总结
2014/08/28 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL