使用vue-touch实现移动端左右滑动屏幕切换页面(左右滑动切换路由)
threshold:50//设置左右滑动的距离。3.在路由的index.js中配置。1.安装vue-touch。2.在main.js中引入。使用vue-touch实现移动端左右滑动屏幕切换页面(左右滑动切换路由)
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)