# bz-tabs 标签页

# 基本用法

用作不同视图的显示

与子组件 bz-tab-item 结合使用

扫码预览

<template>
    <view class="demo-ui-page">
        <view class="demo-content">
            <view class="demo-title">bz-tabs 标签页</view>
            <demo-cell
                TBPadding="0"
                cellBgColor="#f8f8f8"
            >
                <bz-tabs v-model="activeKey1">
                    <bz-tab-item
                        v-for="(item, index) in 3"
                        :key="index"
                        :title="`标签${item}`"
                        :tabKey="index"
                        >内容{{ item }}</bz-tab-item
                    >
                </bz-tabs>
            </demo-cell>
            <demo-cell
                title="类型属性"
                subTitle="showBadge badge disabled"
                cellBgColor="#f8f8f8"
            >
                <bz-tabs v-model="activeKey2">
                    <bz-tab-item
                        :title="`标签1`"
                        :tabKey="0"
                        showBadge
                        >内容1</bz-tab-item
                    >
                    <bz-tab-item
                        :title="`标签2`"
                        :tabKey="1"
                        :badge="'9'"
                        showBadge
                        >内容2</bz-tab-item
                    >
                    <bz-tab-item
                        :title="`标签3`"
                        :tabKey="2"
                        disabled
                        >内容3</bz-tab-item
                    >
                </bz-tabs>
            </demo-cell>
            <demo-cell
                title="内容超出可滑动"
                cellBgColor="#f8f8f8"
            >
                <bz-tabs
                    v-model="activeKey4"
                    color="#5D68E8"
                >
                    <bz-tab-item
                        v-for="(item, index) in 9"
                        :key="index"
                        :title="`标签${item}`"
                        :tabKey="index"
                        >内容{{ item }}</bz-tab-item
                    >
                </bz-tabs>
            </demo-cell>
            <demo-cell
                title="弹性撑开"
                subTitle="stretch (内容超出100%还是会进行滚动)"
                cellBgColor="#f8f8f8"
            >
                <bz-tabs
                    v-model="activeKey3"
                    stretch
                >
                    <bz-tab-item
                        v-for="(item, index) in 4"
                        :key="index"
                        :title="`标签${item}`"
                        :tabKey="index"
                        >内容{{ item }}</bz-tab-item
                    >
                </bz-tabs>
            </demo-cell>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            activeKey1: 1,
            activeKey2: 0,
            activeKey3: 2,
            activeKey4: 3
        }
    },
    methods: {
        beforeChange(e) {
            console.log(e)
            // return false // 禁止改变
        }
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

展开刷新关闭

# 属性说明

# bz-tabs Props

属性名	类型	默认值	必填	说明
v-model	String	-	是	当前选中的 tab key
color	String	蓝色	-	主题颜色
~~tabList~~	Array<{label: '标签名', key: '索引 key', content: '文本内容', badge: '右上角红色标数', showBadge: 是否展示右上角红色标}>	false	-	tabs 数据（建议使用 bz-tab-item）
navLine `1.0.1`	Boolean	false	-	是否需要 nav 分界线
navSpace `1.0.1`	String	'0px'	-	nav 左右边界间距
hasContent	Boolean	true	-	是否需要 content
scrollViewNav	Boolean	false	-	定位到当前选择的tab
stretch	Boolean	false	-	是否自动撑开宽度至弹性布局（超出后依旧滚动）
beforeChange	Function	-	-	tab 改变前触发事件(若 return fasle 则不改变)
@change	Handler	-	-	tab 改变时触发事件，参数为新的 tab key

# bz-tab-item Props

属性名	类型	默认值	必填	说明
title	String	-	是	标签标题
tabKey	String	-	是	标签 key 值
disabled	Boolean	false	-	是否禁用
badge	String	-	-	右上角红色标数
showBadge	Boolean	false	-	是否展示右上角红色标

← bz-pagination 分页器