vue 左右滑动切换div_vue滑动切换组件怎么实现？

我这边刚好最近在做项目,实现了楼主想要的类似动效,唯一不足的是当返回的时候和iOS原生应用还是有些差别的,简单来说可以这样做

首先我们假设入口文件是app.vue,那么接下来所有的其他路由,都必须是app.vue的子组件

app.vue可以这么写

项目js入口文件 index.js可以这么定义

import App from './App.vue'

import Index from './Index.vue'

import Detail from './Detail.vue'

const routes = [

{

path: '/', component: App,// (App.vue)

children: [

{ path: '/index', name: 'index', component: Index },

{ path: '/index/detail', name: 'detail', component: Detail },

]

}

]

const router = new VueRouter({

routes

})

const app = new Vue({

router

}).$mount('#app')

此时Index和Detail就是APP.vue的子路由的组件了,接下来我们实现动效,在APP.vue文件里监听$route的变化,做好切换的类

APP.vue

export default {

// ...