JSPM

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框架正在开发中。。。