Atme-touch NPM

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 的包装事件