1.安装vue-touch
npm install vue-touch@next --save
2.在main.js中引入
import VueTouch from 'vue-touch'
Vue.use(VueTouch,{name:'v-touch'})
VueTouch.config.swipe = {
threshold:50 //设置左右滑动的距离
}
3.在路由的index.js中配置
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import GoodsList from '@/view/GoodList'import GoodDetail from '@/view/GoodDetail'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path:'/goods',name:'GoodsList',component:GoodsList},{path:'/detail',name:'GoodDetail',component:GoodDetail}]})
4.在某页面中
<template><div class="hello"><v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</v-touch></div></template><script>export default {name: 'HelloWorld',methods:{swiperleft: function () { //左划切换到goods页this.$router.push({'path':'/goods'});},swiperright: function () { //右滑切换到detail页this.$router.push({'path':'/detail'});}}}</script>