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>