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如何检查数组变化(Vue2中无法检测到数组变动的原因及解决)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- vue 为什么使用虚拟dom(Vue虚拟Dom到真实Dom的转换)
- vue端口号是什么原理(解决vue前后端端口不一致的问题)
- vue三种判断条件(Vue中插槽和过滤器的深入讲解)
- vue父组件怎么用子组件的数据(Vue使用v-model封装el-pagination组件的全过程)
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue 手机端tab切换页面不刷新(vue Tab切换以及缓存页面处理的几种方式)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- vue路由跳转自动定位在哪里(Vue路由this.route.push跳转页面不刷新的解决方案)
- vue-router底层实现原理(vue-router history模式服务器端配置过程记录)
- vue滚动条滚动事件(vue实现一个滚动条样式)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- 萌娃唱《白龙马》走红,那生动的小表情,网友直呼 简直是戏精(萌娃唱白龙马走红)
- 朱鹤松被不断认可,凤凰传奇玲花喊话岳云鹏,索要老朱演出门票(朱鹤松被不断认可)
- 元宵晚会槽点多,芒果台上来就假唱,岳云鹏不说相声改评书了(元宵晚会槽点多)
- 岳云鹏跟凤凰传奇谈心,说出了人生中最重要的三个人,这才成功(岳云鹏跟凤凰传奇谈心)
- 爱情可以当饭吃吗(爱情能当饭吃吗)
- Top 3 JSHS《运动与健康科学 英文 》跻身SCI体育学期刊世界前三(Top3JSHS运动与健康科学)
热门推荐
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- mysql 建表命令注释(mysql alter table命令修改表结构实例详解)
- css3设置过渡效果(CSS3 media queries + jQuery实现响应式导航)
- css高级技巧图解(20个非常实用的CSS技巧)
- python爬虫怎么设置代理ip(python爬虫简单的添加代理进行访问的实现代码)
- php错误处理及调试(php报错502 bad gateway解决方法)
- nginx如何代理项目(Nginx代理同域名前后端分离项目的完整步骤)
- django admin 开发实例(Django给admin添加Action的步骤详解)
- pythonzipfile的用法(对Python之gzip文件读写的方法详解)
- mysql创建用户并给用户授权(MySQL 主从复制中创建复制用户的时机探讨)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9