vue h5项目实现类似QQ 左滑动态效果

• 现在很多项目为了达到更好的用户体验，都想把功能都做的更好的展示效果。
• 那就来看看 vue-touch 吧 vue-touch github

PS:如果Vue是2.x 的版本的话，一定要下next分支上的。

1. 安装 vue-touch

npm install vue-touch@next --save
yarn add vue-touch@next --save
cnpm install vue-touch@next --save dev

2. 使用
   在main.js 中 引入

// main.js 
 import VueTouch from 'vue-touch
 Vue.use(VueTouch, {name: 'v-touch'})
 VueTouch.config.swipe = {
  threshold: 100 //手指左右滑动距离
}

3. 在左右滑动页面的父组件使用

<v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight"  tag="div">
    <router-view></router-view>
</v-touch>

左滑事件：swipeleft， 右滑事件：swiperight，更多请看API