移动端,常见的tab切换效果比较多,今天,我就用cube-ui ,这个移动端非常火的UI框架来实现。我们使用vue来做tab切换效果的时候,往往倾向于用路由实现,其实也可以用组件来实现,而且在滑动效果的细节上更加完善。
首先完成tab的切换,使用 cube-tab-bar 这个组件,然后传入一个数组,数组对象中,包含label标签,就是tab的标题。
可以绑定点击事件,onChange事件。
还可以添加样式
设置默认选中
tab切换的同时,主体也相应的切换。
下面说一下比较常见的主体滑动,tab同时切换,而且滑动的比例也相同,这样就是一个比较好的用户体验了。主要涉及到 cube-slide cube-slide-item 这两个组件。