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


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 错误处理的几种方法
Jun 13 Javascript
JS小框架 fly javascript framework
Nov 26 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
分享Javascript实用方法二
Dec 13 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
React实现全选功能
Aug 25 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
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
制作特殊字的脚本
2006/06/26 Javascript
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
用js实现随机返回数组的一个元素
2007/08/13 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
Python实现自动上京东抢手机
2018/02/06 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
外贸业务员的岗位职责
2013/11/23 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
学校四风对照检查材料
2014/08/28 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
2014年电厂工作总结
2014/12/04 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
公司与个人合作协议书
2016/03/19 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫