vue实现滑动切换效果(仅在手机模式下可用)


Posted in Javascript onJune 29, 2020

本文实例为大家分享了vue实现滑动时红黄色块左右滑动相应距离,效果如下图

vue实现滑动切换效果(仅在手机模式下可用)

实现过程主要在于实时跟踪手指滑动位置与原位置之间的偏移量,再相应移动红黄块。

红黄块布局如下

back中包含back-l,back-r左右两块,正常情况下为了隐藏其中一块,子模块需要设置display: inline-block,并且宽度都需要设置width: 100%。父模块中设置white-space: nowrap用于处理两个子模块之间的空白。

<template lang="html">
 <div class="back"
 @touchstart.prevent="touchStart"
 @touchmove.prevent="touchMove"
 @touchend="touchEnd" ref="back">
 <div class="back-l" ref="left"></div>
 <div class="back-r" ref="right"></div>
 </div>
</template>
 
<style scoped lang="stylus" rel="stylesheet/stylus">
.back
 position: fixed
 width: 100%
 height: 100px
 white-space: nowrap
 .back-l
 position: relative
 vertical-align: top
 display: inline-block
 width: 100%
 height: 100%
 background-color: red
 .back-r
 display: inline-block
 vertical-align: top
 position: relative
 width: 100%
 height: 100%
 background-color: yellow
</style>

父模块监听滑动事件

滑动事件分为三种:touchstart,touchmove,touchEnd,加上prevent避免页面相应滑动。

在touchstart中记录滑动开始点:

touchStart(e) {
  const touch = e.touches[0]
  this.touch.startX = touch.pageX
  this.touch.startY = touch.pageY
 }

touchmove中为滑动过程,手指未离开页面,离开页面时触发touchend。滑动过程中,当横向偏离位置大于纵向偏离位置时认为滑动有效,记录手指偏离位置,相应移动红黄块。

touchMove(e) {
  console.log("move");
  const touch = e.touches[0]
  //横向和纵向偏离位置
  const deltaX = touch.pageX - this.touch.startX
  const deltaY = touch.pageY - this.touch.startY
  if (Math.abs(deltaY) > Math.abs(deltaX)) {
  return
  }
  const left = this.currentPlay == 'red' ? 0 : -window.innerWidth
  var offsetWidth = Math.min(0, Math.max(-window.innerWidth,left+deltaX))
  //记录滑动的距离占屏幕宽度的百分比,如果滑动太少则不切换
  this.percent = Math.abs(offsetWidth/window.innerWidth)
  //移动红黄块  
  this.$refs.back.style["transform"] = `translate3d(${offsetWidth}px,0,0)`
  //设置动画时间  
  this.$refs.back.style["transitionDuration"] = 10
 }

计算偏移量时首先需要知道当前偏移位置,如果当前在红块,初始偏移量为0,否则初始偏移量为负的屏幕宽度。初始偏移量加上横向偏移量首先和-window.innerWidth取最大值,-window.innerWidth为最左偏移量。再和0相比较取最小值,偏移量为0或者大于零则不再(向右移动)移动,小于零则可以向左移动。

touchend中处理最终效果,如果滑动距离不大于某一值则恢复原位,否则切换。

touchEnd() {
 console.log("end");
 console.log(this.percent);
 let offsetWidth
 let percent
 //当前为红色,滑动占比大于0.1则切换,否则回到原位置
 if(this.currentPlay === 'red'){
 if(this.percent > 0.1) {
  this.currentPlay = 'yellow'
  offsetWidth = -window.innerWidth
 } else {
  offsetWidth = 0
 }
 } else {
 //当前为黄色,滑动占比大于0.9则切换,否则回到原位置
 if(this.percent < 0.9) {
  this.currentPlay = 'red'
  offsetWidth = 0
 } else {
  offsetWidth = -window.innerWidth
 }
 }
 //这里的transform是针对最开始的位置而言,而不是移动过程中的位置
 this.$refs.back.style["transform"] = `translate3d(${offsetWidth}px,0,0)`
 this.$refs.back.style["transitionDuration"] = 10
}

完整代码

<template lang="html">
 <div class="back"
 @touchstart.prevent="touchStart" @touchmove.prevent="touchMove"
 @touchend="touchEnd" ref="back">
 <div class="back-l" ref="left"></div>
 <div class="back-r" ref="right"></div>
 
 </div>
</template>
 
<script>
export default {
 data() {
 return {
  currentPlay: 'red',
  percent: 0
 }
 },
 created() {
 this.touch = {}
 },
 methods: {
 touchStart(e) {
  const touch = e.touches[0]
  this.touch.startX = touch.pageX
  this.touch.startY = touch.pageY
 },
 touchMove(e) {
  console.log("move");
  const touch = e.touches[0]
  const deltaX = touch.pageX - this.touch.startX
  const deltaY = touch.pageY - this.touch.startY
  if (Math.abs(deltaY) > Math.abs(deltaX)) {
  return
  }
  const left = this.currentPlay == 'red' ? 0 : -window.innerWidth
  var offsetWidth = Math.min(0, Math.max(-window.innerWidth,left+deltaX))
  this.percent = Math.abs(offsetWidth/window.innerWidth)
  this.$refs.back.style["transform"] = `translate3d(${offsetWidth}px,0,0)`
  this.$refs.back.style["transitionDuration"] = 10
 
 
 
 },
 touchEnd() {
  console.log("end");
  console.log(this.percent);
  let offsetWidth
  let percent
  if(this.currentPlay === 'red'){
  if(this.percent > 0.1) {
   this.currentPlay = 'yellow'
   offsetWidth = -window.innerWidth
  } else {
   offsetWidth = 0
  }
  } else {
  if(this.percent < 0.9) {
   this.currentPlay = 'red'
   offsetWidth = 0
  } else {
   offsetWidth = -window.innerWidth
  }
  }
  this.$refs.back.style["transform"] = `translate3d(${offsetWidth}px,0,0)`
  this.$refs.back.style["transitionDuration"] = 10
 }
 }
}
</script>
 
<style scoped lang="stylus" rel="stylesheet/stylus">
.back
 position: fixed
 width: 100%
 height: 100px
 white-space: nowrap
 .back-l
 position: relative
 vertical-align: top
 display: inline-block
 width: 100%
 height: 100%
 background-color: red
 .back-r
 display: inline-block
 vertical-align: top
 position: relative
 width: 100%
 height: 100%
 background-color: yellow
 
 
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
微信小程序设置滚动条过程详解
Jul 25 #Javascript
vuejs移动端实现div拖拽移动
Jul 25 #Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 #Javascript
vue实现一拉到底的滑动验证
Jul 25 #Javascript
微信小程序实现图片选择并预览功能
Jul 25 #Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 #Javascript
微信小程序绘制图片发送朋友圈
Jul 25 #Javascript
You might like
德劲1104的电路分析与改良
2021/03/01 无线电
一个PHP+MSSQL分页的例子
2006/10/09 PHP
php操作access数据库的方法详解
2017/02/22 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Python如何读取文件中图片格式
2020/01/13 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
医学院学生求职简历的自我评价
2013/10/24 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL
Java实现注册登录跳转
2022/06/16 Java/Android