vue cli使用vue-touch滑動(實現左右滑動切換頁面)

1原理:實際上是將百度touch.js引入到項目中 而後有滑動等事件 在事件中調用方法vue

                    vue-touch 地址:https://github.com/vuejs/vue-touch/tree/nextgit

2安裝:github

                npm install vue-touch @ nextnpm

                引入man.js(我引入的報錯,找不到路徑 手動改掉)app

import VueTouch from 'vue-touch'

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

VueTouch.config.swipe = {

threshold: 100 //手指左右滑動距離

}

 下面是一個使用的例子 (使用提供的v-touch標籤 就能夠觸動手勢 根據不一樣的手勢調用方法便可,swipeleft左滑事件)this

<template>
    
      <div>
        <p>testRouter.vue</p>
      <v-touch v-on:swipeleft="swiperleft"  class="wrapper">left</v-touch>
      <v-touch  v-on:swiperight="swiperright" class="wrapper">right</v-touch>
   <div class="menu-container" ref="menuContainer">  
  <!-- 這個是內容 --> 
   </div>
        </div>   
</template>

<script>
 export default {
     data(){
         return{
             
         }
     },
    methods: {
    swiperleft: function () {
        console.info(111);
   this.$router.push({'path':'/b'});
  },
  swiperright: function () {
   this.$router.push({'path':'/a'});
   console.info(2222);
  }
    }
 }
</script>

<style>

</style>
相關文章
相關標籤/搜索