vue移动端返回在指定位置(vue移动端判断手指在屏幕滑动方向)
类别:编程学习 浏览量:2796
时间:2021-10-18 11:17:36 vue移动端返回在指定位置
vue移动端判断手指在屏幕滑动方向vue移动端判断手指在屏幕滑动方向,供大家参考,具体内容如下
可以据此实现手指滑屏切换tab的功能,例如京东的订单页,这几个tab切换就可以利用这个实现
页面
<li @touchstart="handleTouchstart" @touchend="handleTouchend" class="slotWrap" >
//屏幕滑动 //手指按下屏幕 handleTouchstart(event){ this.startTime = Date.now() this.startX = event.changedTouches[0].clientX this.startY = event.changedTouches[0].clientY }, //手指离开屏幕 handleTouchend(event){ const endTime = Date.now() const endX = event.changedTouches[0].clientX const endY = event.changedTouches[0].clientY //判断按下的时长 if(endTime - this.startTime >2000){ return } //滑动的方向 let direction = ""; //先判断用户滑动的距离,是否合法,合法:判断滑动的方向 注意 距离要加上绝对值 if(Math.abs(endX -this.startX)>10){ //滑动方向 if(Math.abs(endY -this.startY)>30){ // console.log("y方向偏移太多,不让你滑了") return }else{ direction = endX -this.startX >0?"right":"left" } }else{ return } //用户做了合法的滑动操作 // console.log('方向'+direction) if(direction==='left'){ if(this.currents+1===this.list.length){ return }else{ this.currents++ //触发事件 this.$emit('getData') } } if(direction==='right'){ if(this.currents===0){ return }else{ this.currents-- //触发事件 this.$emit('getData') } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue怎么接收后台的数据(Vue封装全局toast组件的完整实例)
- vuekeep-alive源码(vue中keepAlive组件的作用和使用方法详解)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vuecli项目入门(vue-cli4.5.x快速搭建项目)
- vue左右联动列表(vue+iview的菜单与页签的联动方式)
- vue验证码怎么用(vue验证码组件使用方法详解)
- vue项目做过哪些打包优化(Vue项目优化的一些实战策略)
- vue elementui侧边栏怎么切换页面(Vue + element实现动态显示后台数据到options的操作方法)
- springbootvue数据交互系统(Springboot运用vue+echarts前后端交互实现动态圆环图)
- vue渲染数据的过程(Vue前端高效开发之列表渲染指令)
- vue3.0 黑暗风格(Vue3.0 手写放大镜效果)
- vue中router的具体用法(vue-router中hash模式与history模式的区别)
- vue集成文件上传插件(vue 实现上传组件)
- vue调用后台接口实现预览(vue实现集成腾讯TIM即时通讯)
- vue怎么更换自定义水印(Vue之全局水印的实现示例)
- 全椒人,你还记得吗 那年,那人,那网,那些我们的青春记忆(全椒人你还记得吗)
- 全椒人在苏州10周年联谊会在苏州举办(全椒人在苏州10周年联谊会在苏州举办)
- 这个全椒人被通报表彰,看看你认识吗(这个全椒人被通报表彰)
- 全椒人,38年集体回忆 1980-2018 ,看完不要哭(全椒人38年集体回忆)
- 董元奔吟咏历代文人 1012新旧均可 全椒人张璪 1022 -1093(董元奔吟咏历代文人)
- 泪目 这位 刷屏 的英雄,是全椒人的骄傲(泪目这位刷屏)
热门推荐
- python抓取贴吧标题和图片代码(Python实现的爬取百度贴吧图片功能完整示例)
- SQL Server中如何将数据导出为XML或Json文件
- JavaScript instanceof 的用法
- css高级技巧图解(20个非常实用的CSS技巧)
- python编写自动发送微信信息(python实现向微信用户发送每日一句 python实现微信聊天机器人)
- python删除list的指定元素(Python list列表中删除多个重复元素操作示例)
- linux怎么退出括号模式(Linux使用stty显示修改终端行设置)
- dede织梦的后台如何调整和使用(织梦dedecms整合添加ckplayer播放器支持flv,mp4等播放功能)
- php上传图片视频代码(详解PHP素材图片上传、下载功能)
- mysql binlog日志位置(开启MySQL的binlog日志的方法步骤)