Skip to content

Tabs 标签选项卡


该组件,是一个tabs标签选项卡组件,在标签多的时候,可以配置为左右滑动(被激活的标签会自动滚动到中间),标签少的时候,可以禁止滑动。

TuniaoUI中共有2个组件可以实现tabs标签切换,分别是tn-tabs组件,tn-tabs-swiper组件,他们的异同点是:

  • tn-tabs组件可以不结合uni-appswiper轮播组件使用,tn-tabs-swiper组件是必须要结合uni-appswiper轮播组件才能使用的。
  • tn-tabs组件使用更简洁明了(这也是其存在的理由),tn-tabs-swiper组件配置相对复杂一些。
  • tn-tabs-swiper组件相比tn-tabs组件,由于搭配了uni-appswiper轮播组件,获得了滑块跟随,标签颜色渐变等效果,而tn-tabs组件是不具备的。

总的来说,二者配置参数和功能都差不多,看用户的需求自行衡量该使用哪一个组件。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序
兼容中兼容中兼容中兼容中

基本使用

通过设置isScroll(默认为true),配置tabs组件的内容是否可以左右拖动,一般4个标签以下时,无需拖动,设置为false,5个标签以上,建议可以左右拖动。

tabs标签的切换,需要绑定current值,在change事件回调中可以得到index,将其赋值给current即可。

具体的标签,通过list参数配置,该参数要求为数组,元素为对象,对象要有name属性,如果对象包含了count属性则会自动在右上角显示角标,用户可以通过设置namecount参数来自定义对象中namecount属性的名称。

vue
<tn-tabs :list="list" :isScroll="false" :current="current" name="tab-name" @change="change"></tn-tabs>

<script>
  export default {
    data() {
      return {
        list: [{
          tab-name: '待收货'
        }, {
          tab-name: '待付款'
        }, {
          tab-name: '待评价',
          count: 5
        }],
        current: 0
      }
    },
    methods: {
      change(index) {
        this.current = index;
      }
    }
  }
</script>

控制tabs组件的宽度

有时候我们并不想让tabs组件占满整个屏幕的宽度,如果有此需求,可以给tabs外面嵌套一个view元素,控制这个view的宽度或者内外边距,view里面的tabs组件 宽度也会相应的发生变化。

vue
<view style="width: 400rpx;">
  <tn-tabs :list="list" current="2"></tn-tabs>
</view>

自定义活动tab的样式

  • 通过activeColorinactiveColor控制tabs的激活和非激活颜色。

  • fontSize为tabs文字大小。

  • current为初始化tabs的激活tab索引,默认为0。

  • gutter为单个tab标签的左右内边距之和,即左右各占gutter的一半。

vue
<tn-tabs :list="list" current="2" activeColor="#31C9E8" inactiveColor="#E6E6E6" :fontSize="36"></tn-tabs>

自定义底部滑块的样式

  • 可以通过activeColor控制颜色(同时为当前活动tab文字颜色和滑块的颜色)。
  • barWidth控制滑块的长度(rpx)。
  • barHeight控制滑块高度。
vue
<tn-tabs :list="list" current="2" activeColor="#31C9E8" inactiveColor="#E6E6E6" :barWidth="50"></tn-tabs>

API

Props

属性名说明类型默认值可选值
list标签数据数组,格式为对象数组Array--
namelist参数中name属性的名称Stringname-
countlist参数中count属性的名称,如果list对象包含了count属性则会自动在右上角显示角标Stringcount-
current当前活动的tab索引Number0-
isScroll菜单可以左右滑动Booleantruefalse
heighttabs组件的高度,单位rpxNumber80-
toptabs组件距离顶部的距离,用于处理使用了自定义顶部的情况会导致tabs被遮挡,单位pxNumber--
itemWidthtabs每个item的宽度String|Numberauto-
duration过渡动画执行时间,单位sNumber0.3-
activeColor标签激活时的颜色String#01BEFF-
inactiveColor标签未激活时的颜色String#080808-
activeItemStyle激活标签的自定义样式Object--
inactiveItemStyle未激活标签的自定义样式Object--
showBar显示底部滑块Booleantruefalse
barWidth底部滑块的宽度,单位rpxNumber40-
barHeight底部滑块的高度,单位rpxNumber6-
barStyle底部滑块自定义样式Object--
gutteritem的左边边距,单位rpxNumber30-
badgeOffset如果有微标的时候,微标的偏移参数,格式为[x, y],对应的值为toprightArray[20, 22]-
bold字体是否加粗Booleanfalsetrue

Slots

none

Event

事件名称说明回调参数
change点击标签时触发index: 当前点击标签的index,从0开始