1.0.3 • Published 5 years ago
mtouch-js v1.0.3
mTouch
mTouch移动端 ( 兼容pc端) 手势操作库，解决zepto库“点透”的bug，并支持事件委托
支持的事件：
tap单击doubletap双击longtap长按swipestart滑动开始swipeend滑动结束swiping滑动swipeleft向左划swiperight向右划swipeup向上划swipedown向下划
使用
1、npm 包
// 安装
npm install mtouch-js --save
// 引用
import { mtouchDom as mTouch } from 'mtouch-js';
// import { mtouchVue as mTouch } from 'mtouch-js';
// 需要使用es6语法的这样引入
// import mtouchDom as mTouch from 'mtouch-js/dist/mtouch-dom.es.js';
// import mtouchVue as mTouch from 'mtouch-js/dist/mtouch-vue.es.js';2、<script> 标签 引用cdn路径
<script src="https://unpkg.com/mtouch-js@1.0.1/dist/mtouch-dom.min.js"></script>
<!--
通过 window.mTouch 调用
-->API
1、mTouch.config（配置项）
mTouch.config({
tapMaxDistance: 10, // 单击事件允许的滑动距离
doubleTapDelay: 200, // 双击事件的延时时长（两次单击的最大时间间隔）
longTapDelay: 700, // 长按事件的最小时长
swipeMinDistance: 20, // 触发方向滑动的最小距离
swipeTime: 300, // 触发方向滑动允许的最长时长
lockDirection: true, // 是否锁定方向，一旦触发横向/竖向滑动后，就一直锁定这个方向，如需不锁定方向，配置成false
})以上是默认值，可根据具体使用场景自行配制配置项，但需要注意每个配置项之间的约束关系，比如longTapDelay不能比doubleTapDelay小...
2、.on(eventType, proxyStr, handler(event))
绑定事件方法，使用方式类似jQuery的on方法，支持链式调用，支持事件委托，回调函数返回false阻止冒泡及默认行为，同样可以用原生的e.stoPropagation()和e.preventDefault()
注：回调函数中被注入的参数
event是拓展了的原生事件对象, 添加了属性event.mTouchEvent
mTouchEvent = {
type: string,
target: dom,
pageX: number,
pageY: number,
startX: number,
startY: number,
moveX: number,
moveY: number
}
// 其中 startX、startY、moveX、moveY 只有 swiping 事件才有使用方法
mTouch('.btn').on('tap', function (e) {
//...
}).on('doubletap', function (e) {
//...
})
.on('longtap', function (e) {
//...
});
mTouch('.btn-group').on('tap', '.btn', function (e) {
//...
});3、.off(eventType, proxyStr, handler)
取消绑定事件方法，使用方式类似jQuery的off，有一点需要注意，通过事件委托绑定的事件必须得由实际绑定事件的节点取消绑定，如：
mTouch('.btn-group').on('tap', '.btn', function (e) {
//...
});
// .btn的tap事件委托到.btn-group，要取消该tap事件，要这样做:
mTouch('.btn-group').off('tap', '.btn');
// 暂没有实现这种方式：
mTouch('.btn').off('tap'); //错误的方式更多用法请查看 demo 为了你的更佳体验，请用Chrome模拟mobile或手机打开
vue 使用
<body>
...
<div class="demo">
<span v-touch:tap="onTap">点我</span>
</div>
...
<script>
Vue.use(mTouch);
var vue = new Vue({
el: '.demo',
data: {},
methods: {
onTap: function () {
console.log('你点击了一下');
}
}
})
</script>
</body>感谢您的阅读！