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-websocket 组件教程(Vue+express+Socket实现聊天功能)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vue怎么注册公共组件(解读Vue组件注册方式)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- vue 为什么使用虚拟dom(Vue虚拟Dom到真实Dom的转换)
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- vue项目部署到服务器的nginx(Nginx部署vue项目和配置代理的问题解析)
- springbootvue项目代码(Vue+SpringBoot实现支付宝沙箱支付的示例代码)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vuetable表格合并(vue-table实现添加和删除)
- vue十大基础知识(vue实战中的一些实用小魔法汇总)
- vue移动端图片放大效果实现(vue实现图片切换效果)
- vue指令使用技巧(Vue指令工作原理实现方法)
- vue端口号是什么原理(解决vue前后端端口不一致的问题)
- vue怎么实现输入框(vue车牌输入组件使用方法详解)
- 百事大吉蓝底 绿底手机高清壁纸(绿底手机高清壁纸)
- 蓝底证件照怎么制作 证件照换底色 换尺寸快速搞定(蓝底证件照怎么制作)
- 你喜欢足球吗 足球如何点亮世界的(足球如何点亮世界的)
- 不可分鸽是什么梗(不可分鸽是什么梗)
- 古代的鸽子是爱情的象征,并非和平的使者(古代的鸽子是爱情的象征)
- 一课译词 放鸽子(一课译词放鸽子)
热门推荐
- laravel后台管理(关于laravel后台模板laravel-admin select框的使用详解)
- python与气象(使用Python和Prometheus跟踪天气的使用方法)
- zabbix如何验证监控(Zabbix 动态执行监控采集脚本的实现原理)
- yii框架使用教程(Yii框架分页技术实例分析)
- laravel实现跨域访问(使用laravel和ajax实现整个页面无刷新的操作方法)
- flashfxp使用视频教程(FlashFXP 命令行参数)
- python获取系统的utc时间(Python的UTC时间转换讲解)
- python 取出时间段日志(python 实现提取某个索引中某个时间段的数据方法)
- 微信小程序可以用h5开发不(微信小程序webView嵌入H5的方法实例)
- axios 请求前校验参数(js实现axios限制请求队列)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9