vue中如何实现手机腾讯新闻的侧滑切换整个区域的内容

Question

需求是这样的就是大概像腾讯新闻那样手指侧滑实现切换的效果，然后切换内容，但是我的内容页是在一个页面中的不想进行路由的变换，而我观察了下腾讯新闻的实现方式，他是在左右切换的时候上面的路由也进行了切换。

我现在的代码结构大概是这样的

<div class="tab">
    <div class="tab-item" v-for="item in list">
    </div>
</div>
<div class="content">
    {{content}}
</div>

我现在不加入这个效果前也就是点击tab发送请求，然后用数据重新赋值到content中去，
如果要侧滑的效果那岂不是需要有2个content区域，然后还要保存2组数据，有大神可以给个具体的思路或实现方式么？（在一个路由中实现，不要进行路由的切换）

下面是腾讯的参照页面
http://info.3g.qq.com/g/chann...

Answer 1

实现思路很多

1: 路由切换 切换的时候给动画

2：内容发生变化 （前提是布局格式差不多 不然代码笼统性太大）

3：根据组件引入的切换 components 来把组件切换 切换可以V-show 来切换

...很多很多

Answer 2

你弄一个遮罩层，用遮罩层做动画，触发ajax实现更换内容