Apex

# 标签栏 tabbar

# 描述

位于 应用 底部，方便用户在不同功能模块之间进行快速切换。

# 使用效果

# 使用方法

<import name="my-tabbar" src="apex-ui/components/tabbar/index"></import>
1

# 示例

<template>
  <div class="wrap">
    <text>页面1</text>
    <my-tabbar tabbar="{{tabbarData}}"></my-tabbar>
  </div>
</template>
1
2
3
4
5
6
export default {
    data() {
        return {
            tabbarData: [
                {
                    iconPath: '/images/logo-d.png',
                    selectedIconPath: '/images/logo-d.png',
                    pagePath: '/pages/tabbar',
                    text: 'tab1',
                    active: true
                },
                {
                    iconPath: '/images/logo-d.png',
                    selectedIconPath: '/images/logo-d.png',
                    pagePath: '/pages/tabbar/page1',
                    text: 'tab2',
                    active: false
                },
                {
                    iconPath: '/images/logo-d.png',
                    selectedIconPath: '/images/logo-d.png',
                    pagePath: '/pages/tabbar/page2',
                    text: 'tab3',
                    active: false
                }
            ]
        }
    }
}
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

# API

# 组件属性

属性 类型 默认值 说明
tabbar Array [ ] tab数据对象数组，对象数据结构见下表

# tabbar

属性 类型 说明
iconPath Path 非激活状态下的图标路径，非必填
selectedIconPath Path 激活状态下的图标路径，非必填
pagePath Path 对应的页面路由，必填
text String tab文本，必填
active Boolean 是否激活，必填

← 气泡框 popover →