vue.js - vue滑动切换组件怎么实现？

问题描述

问 题

就是像app那样左右滑动切换模块，还有就是切换的过程中路由该怎么办？
实在没什么思路

解决方案

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

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

app.vue可以这么写

<div class="container">
    <transition :name="transitionName" >
        <router-view class="child-view"></router-view>
    </transition>
</div>

项目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

<script>
    export default {
        // ....
        data(){
            return {
                transitionName, //绑定在组件上面的动效class
            }
        },
        watch: {
            '$route' (to, from){
                const toDepth = to.path.split('/').length
                const fromDepth = from.path.split('/').length
                this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
            }
        }
    }
</script>

此时我们能得知,当路由切换的时候,路径深的会从右边划出来,路径浅的会从左边划出来,有点类似slider的感觉,此时我们只需要完成css的书写就大功告成了
index.less

#app{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.container{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* 上面是为了保证滑动的时候不出现抖动情况 */
.child-view {
    position: absolute;
    left:0;
    top: 0;
    height: 100%;
    width: 100%;
    transition: all .5s cubic-bezier(.55,0,.1,1);
    background-color: #f2f2f2;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
/* 当child-view的内容过多时会撑开child-view使得内部能够滚动 */
.slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(750/@g, 0);
    transform: translate(750/@g, 0);
    transition-delay: .5s;
    -webkit-transition-delay: .5s;
}
.slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-750/@g, 0);
    transform: translate(-750/@g, 0);
    transition-delay: .5s;
    -webkit-transition-delay: .5s;
}
.slide-enter-active {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.slide-leave-active {
    -webkit-transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
/* 然后写上切换时候的类名的CSS变化(这里最好看一下VUE的transition文档) */

参考资料
http://router.vuejs.org/zh-cn...
https://cn.vuejs.org/v2/guide...
上面两个楼主如果看完了,再回过头看代码就能理解了,我这里只是提供了方法,还希望楼主在理解的基础上使用

这篇关于vue.js - vue滑动切换组件怎么实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！