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

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)如有需要的话,还要限制为只有单指操作才能触发

4. 遵循上述要求的完整的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);
}
});
}

5.  Vue版的常用指令如下:

import Vue from 'vue';
// 限制为单手操作,可根据需要自行修改
function commonSingleSlideCheck (ev) {
if (ev.touches.length > 1) {
return false;
}
return true;
}
class VueSlide {
constructor (el, binding, vnode) {
this.el = el;
this.binding = binding;
this.vnode = vnode;
this.evType = '';
this.startPos = {x: 0, y: 0};
this.startTime = null;
this.movePos = {};
this.canPullToLeft = true;
this.canPullToRight = true;
this.canPullToDown = true;
this.canPullToUp = true;
this.typeCheck = {
'toLeft': commonSingleSlideCheck,
'toRight': commonSingleSlideCheck,
'toUp': commonSingleSlideCheck,
'toDown': commonSingleSlideCheck,
'drag': commonSingleSlideCheck,
};
}
start(ev, el, binding, vnode) {
this.startPos.x = ev.changedTouches[0].clientX;
this.startPos.y = ev.changedTouches[0].clientY;
switch (this.evType) {
default:
if (ev.targetTouches.length > 1) {
return false;
}
break;
}
if (this.evType === 'tap') {
this.startTime = new Date().getTime();
if (binding.value.stop === true) {
ev.stopPropagation();
}
if (binding.value.prevent === true) {
ev.preventDefault();
}
}
}
move(ev, el, binding, vnode) {
this.movePos.disX = Math.abs(ev.changedTouches[0].clientX - this.startPos.x);
this.movePos.disY = Math.abs(ev.changedTouches[0].clientY - this.startPos.y);
this.movePos.changeX = ev.changedTouches[0].clientX - this.startPos.x;
this.movePos.changeY = ev.changedTouches[0].clientY - this.startPos.y;
this.movePos.dir = '';
if (!this.typeCheck[this.evType](ev)) {
return false;
}
if ((Math.atan(this.movePos.disX / this.movePos.disY) > Math.PI / 3)) {
ev.preventDefault();
if (this.movePos.changeX > 0 && this.movePos.disX > 30) {
this.movePos.dir = 'right';
}
if (this.movePos.changeX < 0) {
this.movePos.dir = 'left';
}
}
if ((Math.atan(this.movePos.disX / this.movePos.disY) < Math.PI / 6)) {
if (this.movePos.changeY > 0 && this.movePos.disY > 30) {
this.movePos.dir = 'down';
}
if (this.movePos.changeY < 0) {
this.movePos.dir = 'up';
}
}
if (this.evType === 'drag') {
binding.value({
ev: ev,
startX: this.startPos.x,
startY: this.startPos.y,
changeX: this.movePos.changeX,
changeY: this.movePos.changeY,
dir: this.movePos.dir,
});
}
}
end(ev, el, binding, vnode) {
let disX = Math.abs(ev.changedTouches[0].clientX - this.startPos.x);
let disY = Math.abs(ev.changedTouches[0].clientY - this.startPos.y);
let changeX = ev.changedTouches[0].clientX - this.startPos.x;
let changeY = ev.changedTouches[0].clientY - this.startPos.y;
if (this.evType !== 'drag' && this.evType !== 'tap') {
if ((Math.atan(disX / disY) > Math.PI / 3) && disX > 30) {
if (changeX > 0 && this.evType === 'toRight' && this.canPullToRight) {
// console.log('向右滑动');
this.canPullToRight = false;
binding.value(el);
}
if (changeX < 0 && this.evType === 'toLeft' && this.canPullToLeft) {
// console.log('向左滑动');
this.canPullToLeft = false;
binding.value(el);
}
}
if ((Math.atan(disX / disY) < Math.PI / 6) && disY > 30) {
if (changeY > 0 && this.evType === 'toDown' && this.canPullToDown) {
// console.log('向下滑动');
this.canPullToDown = false;
binding.value(el);
}
if (changeY < 0 && this.evType === 'toUp' && this.canPullToUp) {
// console.log('向上滑动');
this.canPullToUp = false;
binding.value(el);
}
}
}
if (this.evType === 'tap') {
let endTime = new Date().getTime();
if (Math.abs(changeX) < 5 && endTime - this.startTime < 300) {
binding.value.handler(binding.value.param);
} else {
return;
}
}
this.canPullToLeft = true;
this.canPullToRight = true;
this.canPullToUp = true;
this.canPullToDown = true;
this.el.addEventListener('touchstart', null);
this.el.addEventListener('touchmove', null);
this.el.addEventListener('touchend', null);
}
init(type) {
let _this = this;
this.evType = type;
this.el.addEventListener('touchstart', function(ev) {
_this.start(ev, _this.el, _this.binding, _this.vnode);
});
this.el.addEventListener('touchmove', function(ev) {
_this.move(ev, _this.el, _this.binding, _this.vnode);
});
this.el.addEventListener('touchend', function(ev) {
_this.end(ev, _this.el, _this.binding, _this.vnode);
});
}
}
/*
v-tap: vue移动端tap时间
eg: <div v-tap="{handler: fn, param: testParam}"></div>
参数: handler: 监听函数(function)
param: 监听函数的参数 (object)
stop: 是否阻止冒泡 (boolean)
prevent: 是否阻止默认行为 (booleam)
*/
Vue.directive('tap', {
bind: function(el, binding, vnode) {
new VueSlide(el, binding, vnode).init('tap');
},
});
Vue.directive('to-left', {
bind: function(el, binding, vnode) {
new VueSlide(el, binding, vnode).init('toLeft');
},
});
Vue.directive('to-right', {
bind: function(el, binding, vnode) {
new VueSlide(el, binding, vnode).init('toRight');
},
});
Vue.directive('to-up', {
bind: function(el, binding, vnode) {
new VueSlide(el, binding, vnode).init('toUp');
},
});
Vue.directive('to-down', {
bind: function(el, binding, vnode) {
new VueSlide(el, binding, vnode).init('toDown');
},
});
// 拖拽指令:执行函数中注入了三个参数
// changeX(Number) : 横轴的变化量
// changeY(Number) : 纵轴的变化量
// dir(String): 用户想要滑动的方向,只有在横纵轴的左右偏移方向在30deg内才会存在方向,其他角度范围内为空字符。
Vue.directive('drag', {
bind: function(el, binding, vnode) {
new VueSlide(el, binding, vnode).init('drag');
},
});

移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令的更多相关文章

  1. (17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换

    1. 概述 生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.json里面对应的就是devDependencies下面相关配置. --生产依赖: 就是 ...

  2. 极客时间-vue开发实战学习(ant-design vue作者)

    vue基础 属性 事件 插槽 指令(Directives) 生命周期 底层原理 vue生态 路由管理器vue Router 状态管理器vuex 同构Nuxt vue实战 实战项目-ant-desing ...

  3. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  4. H5案例分享:移动端滑屏 touch事件

    移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

  5. H5-移动端实现滑屏翻页-原生js/jquery

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案

    概述 近期由于产品快速原型开发的需要,不想用原声的方式开发App两端一起搞时间来不及,目前产品处于大量上feature的阶段,采用混合开发是最合适的选择,所以花了3天的时间研究怎么去实现移动端,拖拽, ...

  7. 利用轮播原理结合hammer.js实现简洁的滑屏功能

    最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...

  8. 滑屏 H5 开发实践九问

    滑屏的交互形式自从在 H5 中流行起来,便广泛应用在产品宣传.广告.招聘和活动运营等场景中,作为微信朋友圈广告惯用的形式,其影响力更是得到了强化与放大.如今滑屏H5可谓玲琅满目,数不尽数. 作为一个 ...

  9. mobile_竖向滑屏

    竖向滑屏 元素最终事件 = 元素初始位置 + 手指滑动距离 移动端,"手指按下","手指移动" 两个事件即可(且不需要嵌套),有需要时才使用 "手指离 ...

随机推荐

  1. bzoj4364: [IOI2014]wall砖墙

    线段树打标记的好(luo)题 打打标记,记得下移 = =听说2000000是用来卡线段树的 = =怎么办呢,,, = =打个读入优化看看能不能卡过去吧 #include<cstdio> # ...

  2. pox目录中的交换机mac地址学习模块 l2_multi源码

    # Copyright 2012-2013 James McCauley # # Licensed under the Apache License, Version 2.0 (the "L ...

  3. Java代码中执行Linux命令,亲测可用

    前提需要知道怎么在linux怎么新建java文件和怎么编译,否则请先学其他知识!! import java.io.*;public class Test{ public static void mai ...

  4. AngularJs记录学习02

    <!doctype html> <html ng-app="myapp"> <head> <meta http-equiv="C ...

  5. android工程混淆和反编译

    一.工程文件的混淆 混淆文件下载:http://download.csdn.net/detail/lxq_xsyu/6328751 1.在根目录下添加progard.cfg文件 2.打开project ...

  6. java中函数是值传递还是引用传递?

    相信有些同学跟我一样,曾经对这个问题很疑惑.在网上也看了一些别人说的观点,评论不一.有说有值传递和引用传递两种,也有说只有值传递的,这里只说下个人见解 先看一个例子 public class Test ...

  7. ios copy和strong,浅拷贝和深拷贝

    copy@property (nonatomic, copy) NSString *name;self.name = mutableString;这时,name对mutableString一个深拷贝, ...

  8. 分红包算法Java实现

    需要考虑几个点: 红包形成的队列不应该是从小到大或者从大到小,需要有大小的随机性. 红包这种金钱类的需要用Decimal保证精确度. 考虑红包分到每个人手上的最小的最大的情况. 下面是利用线段分割算法 ...

  9. 前端使用node.js的http-server开启一个本地服务器

    前端使用node.js的http-server开启一个本地服务器 在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时 ...

  10. Azure系列2.1.2 —— BlobContainerProperties

    (小弟自学Azure,文中有不正确之处,请路过各位大神指正.) 网上azure的资料较少,尤其是API,全是英文的,中文资料更是少之又少.这次由于公司项目需要使用Azure,所以对Azure的一些学习 ...