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


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 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
Javascript的匿名函数小结
Dec 31 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
JavaScript手写数组的常用函数总结
Nov 22 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模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
js日历功能对象
2012/01/12 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
python解析xml文件实例分析
2015/05/27 Python
python2 与python3的print区别小结
2018/01/16 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
《我的第一本书》教学反思
2014/02/15 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
团代会闭幕词
2015/01/28 职场文书
公司放假通知怎么写
2015/04/15 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书