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>