vue cli使用vue-touch滑動(實現左右滑動切換頁面)
阿新 • • 發佈:2019-04-14
1原理:其實是將百度touch.js引入到專案中 然後有滑動等事件 在事件中呼叫方法
vue-touch 地址:https://github.com/vuejs/vue-touch/tree/next
2安裝:
npm install vue-touch @ next
引入man.js(我引入的報錯,找不到路徑 手動改掉)
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})
VueTouch.config.swipe = {
threshold: 100 //手指左右滑動距離
}
下面是一個使用的例子 (使用提供的v-touch標籤 就可以觸動手勢 根據不同的手勢呼叫方法即可,swipeleft左滑事件)
<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>