vue移动端下拉切换页面_使用vue-touch实现移动端左右滑动屏幕切换页面

最新推荐文章于 2022-01-18 15:03:48 发布

weixin_39602560

最新推荐文章于 2022-01-18 15:03:48 发布

阅读量349

点赞数

文章标签： vue移动端下拉切换页面

本文链接：https://blog.csdn.net/weixin_39602560/article/details/111765775

版权

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.在某页面中

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容