Vue在移动端使用侧滑功能解决方案

Vue项目的移动端页面上加上左右滑动效果，安装插件vue-touch
注意：如果Vue是2.x 的版本的话，一定要下next分支

cnpm install vue-touch@next --save

在main.js中进行引入

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

将你要实现左划右划的div块包裹起来

<v-touch @swipeleft="swiperleft" @swiperight="swiperright" class="wrapper">
  <div class="menu-container" ref="menuContainer"></div>
</v-touch>

在methods中写入你要实现的具体功能

methods: {
    swiperLeft() {
      //向左滑动  
    },
    swiperRight() {
      //向右滑动
    }
}

注意：插件老版本可能会在ios系统浏览器中无法上下滑动屏幕，可在v-touch标签中设置如下属性。

<v-touch :swipe-options="{ direction: 'horizontal'}">