vue js判断长按触发及手指的上滑、下滑、左滑、又滑

<span class="btn" @touchstart="touchstart()" @touchmove="touchmove()" @touchend="touchend()">按住说话</span>

@touchstart： 触发按下事件

touchstart() {event.preventDefault() //阻止默认事件（长按的时候出现复制）this.startX = event.changedTouches[0].pageXthis.startY = event.changedTouches[0].pageY
}

@touchmove：触发移动事件，通过x轴y轴移动的距离判断是左滑又滑

touchmove() { // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按event.preventDefault()var moveEndX = event.changedTouches[0].pageXvar moveEndY = event.changedTouches[0].pageYvar X = moveEndX - this.startXvar Y = moveEndY - this.startYif (Math.abs(X) > Math.abs(Y) && X > 0) {alert('left 2 right')} else if (Math.abs(X) > Math.abs(Y) && X < 0) {alert('right 2 left')} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {alert('top 2 bottom')} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {alert('bottom 2 top')} else {alert('just touch')}},

touchmove的最后坐标减去touchstart的起始坐标，X的结果如果正数，则说明手指是从左往右划动；X的结果如果负数，则说明手指是从右往左划动；Y的结果如果正数，则说明手指是从上往下划动；Y的结果如果负数，则说明手指是从下往上划动。

但是：

实际上手指在手机上面滑动时很难做到直上直下的滑动；只要稍微有点斜，就会被x轴的判断现行接管，而与我们的实际操作医院相背离。此时就需要添加特殊的判断技巧，代码如下：

@touchend：触发结束移动事件 通过事件判断是否是长按事件

touchend() { // 手释放，如果在500毫秒内就释放，则取消长按事件event.preventDefault()this.EndTime = new Date().getTime()this.isRecord = falseif (this.EndTime - this.StarTime < 500) {this.EndTime = 0this.StarTime = 0clearTimeout(this.timeOutEvent)// 清除定时器alert('取消')} else {alert('松手')wx.stopRecord({success: function(res) {alert('localId')alert(res)alert(JSON.stringify(res))this.localId = res.localId},fail: function(res) {alert(JSON.stringify(res))}})}

参考文献：https://www.cnblogs.com/lijuntao/p/6479972.html

转载于:https://www.cnblogs.com/dudu123/p/10788649.html

vue js判断长按触发及手指的上滑、下滑、左滑、又滑相关推荐

vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
Vue.js 判断对象属性是否存，不存在添加
Vue.set是可以对对象添加属性的,这里item对象添加一个checked属性 //if(typeof item.checked=='undefined'){if(!this.item.checke ...
vue js 判断两个数组是否相等
数组:引用数据类型,存放在堆里面,所以直接判断两个数组是否相等得到的结果false var arr = [1, 2, 3]var arr1 = [1, 2, 3]console.log(arr == ...
JS方法篇：vue.js判断滚动条触底
mounted(){window.addEventListener('scroll', this.handleScroll) // 监听页面滚动 }, methods:{// 获取页面滚动距离hand ...
[Vue.js] 一篇超级长的笔记，给《Vue.js 实战》划个重点
本文前言本笔记建立在书籍<Vue.js实战 / 梁灏编著>的基础上,旨在帮助有 Vue.js 基础的朋友快速回忆 Vue.js 的细碎内容.初学者建议阅读<Vue.js实战> ...
js define函数_不夸张，这真的是前端圈宝藏书！360前端工程师Vue.js源码解析
优秀源代码背后的思想是永恒的.普适的. 这些年来,前端行业一直在飞速发展.行业的进步,导致对从业人员的要求不断攀升.放眼未来,虽然仅仅会用某些框架还可以找到工作,但仅仅满足于会用,一定无法走得更远.随 ...
[译] State of Vue.js report 2017 中文版
原文链接:https://www.monterail.com/state-of-vuejs-report 译文出自:掘金翻译计划 Event Organizer:leviding Translater ...
State of Vue.js report 2017 中文版
转载自:https://juejin.im/post/5a138fae5188254d28732899 原文链接:www.monterail.com/state-of-vu- 译文出自:掘金翻译计划 ...
vue.js 2.x教程
教程基础安装兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMAScript 5 的浏览器. 更新日志 ...

vue js判断长按触发及手指的上滑、下滑、左滑、又滑

vue js判断长按触发及手指的上滑、下滑、左滑、又滑相关推荐

最新文章

热门文章