cube-ui 移动端滑动效果

移动端，常见的tab切换效果比较多，今天，我就用cube-ui ，这个移动端非常火的UI框架来实现。我们使用vue来做tab切换效果的时候，往往倾向于用路由实现，其实也可以用组件来实现，而且在滑动效果的细节上更加完善。

首先完成tab的切换，使用 cube-tab-bar 这个组件，然后传入一个数组，数组对象中，包含label标签，就是tab的标题。

可以绑定点击事件，onChange事件。

还可以添加样式

设置默认选中


tab切换的同时，主体也相应的切换。

下面说一下比较常见的主体滑动，tab同时切换，而且滑动的比例也相同，这样就是一个比较好的用户体验了。主要涉及到 cube-slide cube-slide-item 这两个组件。

要想完成这个效果，需要依赖于两个事件。
onScroll 和 onChange . onChange 事件用于绑定 tab切换，onScroll 事件主要是来计算滑动比例。

这个滑动比例的难点在比例的计算。必须要强调的一点是众多宽度、高度、坐标的意义的确定。先获取，设置的时候，还需取反，这是根据实际需求来的。

类似效果，其实swiper，等效果都可以实现。