vue关于滑动切换的思路？

先上图：

如果想要点击tab切换页面内容，或者活动页面切换tab，很多ui组件可以做到。今天我要探讨是如何做到像微信那样的滑动切换tab，既能左右滑动切换，又能上下滑动一个页面而不影响其他页面的滚动位置。如果用ui组件的话，子页面都是在一个div里面的，虽然可以做到左右滑动，但是只要有一个页面上下滚动，所有页面也会滚动到同样的高度。浏览了相关的博客或GitHub上面做的插件。大概思路是：子页面是在一个里面切换，他们有各自的路由，像一个单独的页面一样。所以各自的滚动高度应该是不受影响的。接下来，如何让不同route发生切换效果，vue官网介绍可以有过渡效果，用transition。页面滑动切换用的是vue-touch，这是比较简单的滑动切换组件了。让页面滚动一段距离左右滑动页面后回来原来页面，还是保持已滚动的高度，用keep-alive。大概思路就是这样，我的demo放在了GitHub上面：https://github.com/520zzj/router-swipe，这是一个vue左右滑动切换tab的demo，demo是完整的，download下去就可以用，如果报错，先 npm install一下先，在运行。过渡效果不好，还有keep-alive使用有问题，导致做不出缓存效果，希望有路过的大神指点一二。图中，前面点击的是tab切换页面内容，后面是滑动内容切换tab，做的粗糙，希望有大神帮忙优化一下。