Vue 实现移动端左右滑动切换

Vue 实现移动端左右滑动切换

         实现这个功能需要用到touch指令，这个是面向vue2.0的touch指令，是基于touchjs(移动端手势库)。

1. 安装以及引入vue-touch

npm install vue-touch@next --save

//在vue项目中的main.js文件中引入：
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

   2.使用vue-touch

          直接贴上实例代码：

  <v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" >
        
        <div class="content"  >
           
        </div>
   </v-touch>



method:{

 onSwipeLeft: function () {//左滑动

      //写入向左滑触发事件
      //例如跳转页面
      },

 onSwipeRight: function () {//右滑动

      },

    },

}