atme-touch
作者联系QQ: 718879459
描述: atme-touch 是一个基于 vue2.x 的滑动组件 用于替代 vue 项目中的原生滑动事件 目前 vue 官方仓库中的 vue-touch 通过自定义事件来包装 touch 事件 用视图来表达事件 会造成项目结构的混乱也无法达到语义化的目的 通篇 <v-touch><v-touch> 是可以预见的及其糟糕的书写方式 (注:此组件是我开发 atme-ui 的副产品 但是会长时间独立更新)
安装: npm install atme-touch --save-dev
引用:
import atmeTouch from 'atme-touch';
Vue.use(atmeTouch);
// 初始化的时候可以传入第二个参数,示例如下
Vue.use(atmeTouch,{
distance: 30, // 滑动生效距离
duration: 500 // 长按生效持续时间
})
使用: atme-touch 通过将 v-事件名 添加到标签的属性来绑定滑动事件,该属性的的值必须被一个 _m 函数修饰 _m函数第一个参数是要执行的回调函数fn,从第二个参数往后都作为回调函数的参数,有如下示例:
<div v-swipe="_m(handleActive,参数一,参数二)"></div>
new Vue({
el: '.box',
methods: {
handleActive: function(swipeInfo,args1,args2)
{
console.log(swipeInfo); // 第一个参数总是一个事件信息对象,这个参数在要对事件进行更精细控制的时候很有用
console.log(args1); // 传入的第一个参数
console.log(args2); // 传入的第二个参数
}
}
})
执行函数的参数: 回调函数的第一个参数总是一个包含必要信息的对象 该对象可能会有如下键值
event 当前事件的 event 对象
clientX / clientY 发生事件时的坐标位置
gapX / gapY 当前位置相对于开始触控位置的 X Y 距离
所有的事件类型:
tap: 手指点击一个元素并且在这个元素上松开手指以后触发
swipeup / swipedown: 手指在元素上 / 下滑动一定距离(默认30px 可自定义设置)并且松开手指后触发
swipeleft / swiperight: 手指在元素上左 / 右滑动一定距离。。。(同上)
longpress: 手指在元素上长按一定时间后触发,默认 500 毫秒 可以自定义
swipe: 手指在屏幕上滑动持续触发,该方法是 touchmove 的包装事件
swipestart: 手指开始触摸屏幕的时候触发 ,该方法是 touchstart 的包装事件
swipeend: 手指接触触摸屏幕的时候触发,该方法是 touchend 的包装事件
作者联系QQ:718879459
注意:该组件会长期更新,问题会第一时间修复 ,请放心使用。
另:atme-ui 基于 vue 的UI框架正在开发中。。。