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 相关文章推荐
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
微信小程序设置滚动条过程详解
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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
PHP获取当前所在目录位置的方法
2014/11/26 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
战略合作协议书范本
2014/04/18 职场文书
党员承诺书范文
2014/05/19 职场文书
求职信格式要求
2014/05/23 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
python区块链持久化和命令行接口实现简版
2022/05/25 Python