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>