tabs 标签栏

更新时间：2022-02-16

tabs 标签栏

标签栏

属性说明：

属性名	类型	必填	默认值	说明
class-name	String	否	无	自定义 class
direction	String	否	horizontal	水平展示：horizontal;垂直展示：vertical
tabs	Array	是	[]	见下面字段说明
activeName	String	否	无	当前选中标识符
hasPaddingLeft	Boolean	否	false	是否有左侧边距,在水平排版有效
scroll	Boolean	否	false	是否开取滚动（暂时只支持横向滚动）
bindtabchange	EventHandle	否	无	监听切换 tab 事件，event.detail = {name: value, index: value}

tabs 字段说明：

属性名	类型	必填	默认值	说明
name	String	是		tab 值
voiceTag	String	否	name 属性	语音触发内容
label	String	是		tab 标签内容
disabled	Boolean	否		是否禁用
badge-type	String	否		徽标类型目前支持 text
badge-text	String	否		badge-type 为 text 的时候，徽标内的内容，为空时 badge-type="text"不生效
dot	Boolean	否		是否展示红色通知

示例：

json:

{
    "usingComponents": {
        "iov-tabs": "iov-ui/lib/tabs"
    }
}

swan:

<view>
    <iov-tabs
        direction="vertical"
        bindtabchange="tabchange"
        tabs="{{tabs}}"
        active-name="测试1"
    />
    <iov-tabs
        direction="horizontal"
        bindtabchange="tabchange"
        tabs="{{tabs}}"
        active-name="测试1"
    />
</view>

js:

Page({
    data: {
        tabs: [
            {
                name: '测试1',
                label: '测试1'
            },
            {
                name: '测试2',
                label: '第二个'
            },
            {
                name: '测试3',
                label: '第三个'
            }
        ]
    },
    tabchange: function (e) {
        console.log('tabchange', e);
    }
});

switch 开关 tag 标签