移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

原创 pomelott 随笔 vue 68阅读 28 天前 举报

精华版内容详见:https://www.cnblogs.com/pomelott/p/9906316.html

最近在忙混合开发,因交互相对复杂,所以也踩了很多坑。在此做一下总结。

1.tap事件的实际应用

在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行为以解决事件点透的bug。

阻止默认行为有优点,但也会相对带来一些问题。

优点:

(1)解决事件点透

(2)解决IOS10+ safari 以及部分安卓浏览器 不在支持 viewport的最大缩放值和禁止缩放的问题

(3)解决IOS10+ safari下给body加overflow:hidden无效的问题

给元素加了 一个绝对定位,但是元素本身没有定位父级,元素如果超出了body的宽度,body 上的overflow对这个元素,不起效果
解决办法:增加一个div作为根节点,并且添加相对定位和overflow:hidden

缺点:

(1)禁止mouse事件执行(也可以说成是优点,具体情况具体分析)

(2)阻止浏览器的自带效果(左右滑动切换页面,滚动回弹等)

(3)阻止触发浏览器的滚动条

(4)阻止触发浏览器系统菜单

(5)阻止图片文字被选中

(6)阻止input的输入(在新开页面进行输入 eg.淘宝)

2.touchEvent相关变量

(1)touches 当前屏幕上的手指列表

(2)targetTouches 当前元素上的手指列表

(3)changedTouches 触发当前事件的手指列表

(4)clientX 和 clientY 手指相对于可视区的坐标

(5)pageX 和 pageY 手指相对于页面的坐标

3.tap事件封装要点

(1)touchend时确定最大距离,大于此距离无效

(2)确定从touchstart到touchend的时间间隔,大于此事件间隔无效

(3)严格意义上讲,touchmove时也应该有最大距离限制(手指在某元素上点击后绕了一大圈再回到当前元素不应触发tap事件)

(4)需要考虑tap事件对click的影响

(5)如有需要的话,还要限制为只有单指操作才能触发

  1. 遵循上述要求的完整的tap封装如下:

当然你可以扩展为面向对象,或者试用与Vue的各种形式,但原理都是如此。最后会附上Vue版的常用指令

复制代码
function tap(el, fn) {
var start = {};
var moveOverLimit;
el.addEventListener('touchstart', function(e) {
start = {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY,
startTime: new Date().getTime()
}
moveOverLimit = false;
});
el.addEventListener('touchmove', function (e) {
if (Math.abs(e.changedTouches[0].pageX - start.x) > 5 || Math.abs(e.changedTouches[0].pageY - start.y) > 5) {
moveOverLimit = true
}
})
el.addEventListener('touchend', function(e) {
var end = {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY,
endTime: new Date().getTime()
}
// 此处的限制如第三点说明的一样
if (Math.abs(end.x - start.x) < 5 && Math.abs(end.y - start.y) < 5 && end.endTime - start.startTime < 300 && !moveOverLimit) {
fn && fn.call(el, e);
}
});
}
复制代码

Vue版本的移动端操作指令包括滑屏操作与tap事件详见博客园正文:
https://www.cnblogs.com/pomelott/p/9906316.html

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复