uView Tabs 标签

该组件,是一个tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

  • 通过设置scrollable(默认为true),配置tabs组件的内容是否可以左右拖动,一般4个标签以下时,无需拖动,设置为false,5个标签以上,建议可以左右拖动。
  • tabs标签的切换,需要绑定current值,在change事件回调中可以得到index,将其赋值给current即可。

具体的标签,通过list参数配置,该参数要求为数组,元素为对象,对象要有name属性,见示例:

说明

scrollable参数很重要,如果您的tabs项只有几个,且不想tabs导航栏可以被左右滑动的话,请一定要设置scrollablefalse,因为它默认为true




copy

#粘性布局

通过加上u-sticky来使tabs滑动浮动在最顶部。




copy

#显示徽标

可以通过在列表对象中加入badge来设置徽标。




copy

#禁用

可以通过在列表对象中加入disabled = true来设置禁用。




copy

#自定义样式

通过使用activeStyleinactiveStyleitemStyle来设置tabs的样式。




copy

#滑块设置背景图 2.0.30

通过使用lineColor来设置滑块背景图。




copy

#右侧自定义插槽



你可能感兴趣的:(vue.js,前端,javascript)