vue2.0如何實現移動端滑動事件vue-touch

這篇文章主要介紹vue2.0如何實現移動端滑動事件vue-touch，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

Vue-touch的使用

有時候我們不止需要有返回鍵，也要有手勢滑動切換頁面的功能時，這個時候vue-touch就派上用場了

API地址：

https://github.com/vuejs/vue-touch/tree/next

安裝

npm insall vue-touch@next --save
//main.js中引入：
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

用法如下：

//html代碼
<template>
 <v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
   <div class="menu-container" ref="menuContainer">  
  <!-- 這個是內容 --> 
   </div>
 </v-touch>
</template>

export default {
 name: 'Queue',
 data () {
  return {
  }
 },
 methods: {
  swiperleft: function () {
   this.$router.push({'path':'/queuehistory'});
  },
  swiperright: function () {
   this.$router.push({'path':'/home'});
  }
 }
}

下面給大家介紹下vue2.0移動端滑動事件vue-touch，具體內容如下所述：

https://github.com/vuejs/vue-touch/tree/next

cnpm install vue-touch@next

var VueTouch = require('vue-touch')
Vue.use(VueTouch, {name: 'v-touch'})

//左劃   默認渲染為div  data為參數
<v-touch v-on:swipeleft="onSwipeLeft(data)">Swipe me!</v-touch>
//點擊  渲染為一個a標簽
<v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>
//點擊  渲染為p標簽
<v-touch tag="p" v-on:tap="onTap">Tap me!</v-touch>

以上是“vue2.0如何實現移動端滑動事件vue-touch”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！