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

Question

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

Answer 1

我这边刚好最近在做项目,实现了楼主想要的类似动效,唯一不足的是当返回的时候和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...
上面两个楼主如果看完了,再回过头看代码就能理解了,我这里只是提供了方法,还希望楼主在理解的基础上使用

Answer 2

我的开源项目，供参考。
基于 vue 2.0 + vue-router 2.0 等技术实现。
https://segmentfault.com/a/11...

Answer 3

<transition :name="transitionName">
    <router-view/>
</transition>

左右滑动的话 在组件中this.transitionName = 'slide-left' //右滑slide-right

.slide-left-leave-active,.slide-left-enter-active,.slide-right-leave-active,.slide-right-enter-active{
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  transition: all 0.3s ease;
}
.slide-left-enter,.slide-right-leave-to{
  transform: translateX(100%);
}
//便于理解
// .slide-left-enter-to,.slide-left-leave,.slide-right-enter-to,.slide-right-leave{
//   transform: translateX(0);
// }
.slide-left-leave-to,.slide-right-enter {
  transform: translateX(-100%);
}

文档的图可以说相当精髓了

Answer 4

楼上回答的是楼主想要的效果吗？个人以为，用 vue-slider 会更合适一点吧？

如果楼主需要的效果，只是点击标签栏切换路由，那一楼的答案是合适的。如果楼主还需要左右滑动栏目本身来切换内容，可能需要引入slider组件，监听滑动完成事件来切换加载的内容。（个人意见，仅供参考）