今天小编跟大家讲解下有关vue cli使用vue-touch滑动(实现左右滑动切换页面) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关vue cli使用vue-touch滑动(实现左右滑动切换页面) 的相关资料,希望小伙伴们看了有所帮助。
原理:
其实是将百度touch.js引入到项目中 然后有滑动等事件 在事件中调用方法,vue-touch 地址:https://github.com/vuejs/vue-touch/tree/next
安装:
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>来源:爱蒂网