tabs 标签

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

uView中，共有2个组件可以实现tabs标签切换，分别是tabs组件，tabsSwiper组件，他们的异同点是：

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

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

平台差异说明

基本使用

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

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

说明

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

<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
<script>
    export default {
        data() {
            return {
                list: [{
                    name: '待收货'
                }, {
                    name: '待付款'
                }, {
                    name: '待评价'
                }],
                current: 0
            }
        },
        methods: {
            change(index) {
                this.current = index;
            }
        }
    }
</script>

控制组件读取的数组元素属性名

某些情况下，数据可能是从后端获取的，list所需的数组中不一定会有name属性，比如可能为cate_name，如果这种情况还需一定要提供name属性 会导致用户需要循环一遍，把cate_name改成name，显然不人性的，所以uView给tabsSwiper组件提供了一个name参数，您可以设置其值为cate_name，组件内部 会读取数组中的cate_name属性，而不是默认的name属性。

<u-tabs name="cate_name" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
<script>
    export default {
        data() {
            return {
                list: [{
                    cate_name: '待收货'
                }, {
                    cate_name: '待付款'
                }, {
                    cate_name: '待评价'
                }],
                current: 0
            }
        },
        methods: {
            change(index) {
                this.current = index;
            }
        }
    }
</script>

手动配置激活的标签

可以通过current控制tabs当前的第几个tab处于激活状态

<u-tabs ref="tabs" :list="list" current="2"></u-tabs>

控制tabs组件的宽度

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

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

控制底部滑块的样式

1. 可以通过active-color控制颜色(同时为当前活动tab文字颜色和滑块的颜色)。
2. bar-width控制滑块的长度(rpx)。
3. bar-height控制滑块高度。

<u-tabs ref="tabs" :list="list" bar-height="6" bar-width="40" active-color="#2979ff"></u-tabs>

控制tabs组件的活动tab样式

1. 通过active-color和inactive-color控制tabs的激活和非激活颜色。
2. font-size为tabs文字大小。
3. current为初始化tabs的激活tab索引，默认为0。gutter为单个tab标签的左右内边距之和，即左右各占gutter的一半。

<u-tabs ref="tabs" :list="list" active-color="#2979ff" inactive-color="#606266" font-size="30" :current="current"></u-tabs>

API

Props

Events