Vue移動端實現左滑右滑

需要vue2.0以上

 

 

安裝：

npm install vue-touch@next --save

main.js中引入

import VueTouch from 'vue-touch'

Vue.use(VueTouch, {name: 'v-touch'});

在使用的頁面或插件中

  <v-touch
    @swipeleft = "swipeLeft"
    @swiperight = "swipeRight"
    :swipe-options="{direction: 'horizontal'}"
  >
  </v-touch>

methods:{
    // 左滑
    swipeLeft(){
        // 頁面跳轉或其它操作
    },
    // 右滑
    swipeRight(){
        // 頁面跳轉或其它操作
    },
}

 

:swipe-options="{direction: 'horizontal'}"  可以解決引入該組件后不許上下滑動問題