# Tabbar 底部导航栏
# 优点:
此组件提供了自定义tabbar的能力,具有如下特点:
- 图标可以使用字体图标(内置图标和扩展图标)或者图片
- 可以动态切换菜单的数量以及配置
- 切换菜单之前,可以进行回调鉴权
- 可以设置角标或数字化提示
- 有效防止组件区域高度塌陷,无需给父元素额外的内边距或者外边距来避开导航的区域
# 平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
# 基本使用
推荐您使用list数组遍历循环,案例使用基础方式构建,请根据click
事件回调进行后续逻辑操作。
<u-tabbar :value="value1" @change="change1" :fixed="false" :placeholder="false" :safeAreaInsetBottom="false" > <u-tabbar-item text="首页" icon="home" @click="click1" ></u-tabbar-item> <u-tabbar-item text="放映厅" icon="photo" @click="click1" ></u-tabbar-item> <u-tabbar-item text="直播" icon="play-right" @click="click1" ></u-tabbar-item> <u-tabbar-item text="我的" icon="account" @click="click1" ></u-tabbar-item> </u-tabbar> <!-- js --> value1: 0, click1(e) { console.log('click1', e); }
✅ Copy success!
# 显示徽标
使用dot
属性添加--小点--类型徽标,使用badge
属性添加--数字--类型徽标。您也可以使用:badge='badge'
动态设置徽标数量,
这在消息盒子的展示中是比较好用的功能,
<u-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false" > <u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item> <u-tabbar-item text="放映厅" icon="photo" badge="3"></u-tabbar-item> <u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item> <u-tabbar-item text="我的" icon="account" ></u-tabbar-item> </u-tabbar> <!-- data --> value2: 1,
✅ Copy success!
# 匹配标签的名称
<u-tabbar :placeholder="false" :value="value3" @change="name => value3 = name" :fixed="false" :safeAreaInsetBottom="false" > <u-tabbar-item text="首页" icon="home" name="home"></u-tabbar-item> <u-tabbar-item text="放映厅" icon="photo" name="photo" ></u-tabbar-item> <u-tabbar-item text="直播" icon="play-right" name="play-right"></u-tabbar-item> <u-tabbar-item text="我的" name="account" icon="account" ></u-tabbar-item> </u-tabbar> <!-- data --> value3: 'play-right',
✅ Copy success!
# 自定义图标/颜色
如您需要自定义图标/颜色,在u-tabbar-item
标签中使用插槽active-icon
和inactive-icon
来定义图标和颜色
<u-tabbar :value="value4" @change="name => value4 = name" :fixed="false" :placeholder="false" activeColor="#d81e06" :safeAreaInsetBottom="false" > <u-tabbar-item text="首页"> <image class="u-page__item__slot-icon" slot="active-icon" src="https://cdn.uviewui.com/uview/common/bell-selected.png" ></image> <image class="u-page__item__slot-icon" slot="inactive-icon" src="https://cdn.uviewui.com/uview/common/bell.png" ></image> </u-tabbar-item> <u-tabbar-item text="放映厅" icon="photo" ></u-tabbar-item> <u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item> <u-tabbar-item text="我的" icon="account" ></u-tabbar-item> </u-tabbar> <!-- data --> value4: 0,
✅ Copy success!
# 拦截切换事件(点击第二个标签)
在切换事件中,处理拦截事件或者您其他js操作逻辑。
<u-tabbar :value="value5" :fixed="false" @change="change5" :safeAreaInsetBottom="false" :placeholder="false" > <u-tabbar-item text="首页" icon="home" ></u-tabbar-item> <u-tabbar-item text="放映厅" icon="photo" ></u-tabbar-item> <u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item> <u-tabbar-item text="我的" icon="account" ></u-tabbar-item> </u-tabbar> <!-- data --> value5: 0, <!-- js --> change5(name) { if (name === 1) return uni.$u.toast('请您先登录') else this.value5 = name },
✅ Copy success!
# 边框
组件默认带了顶部边框,如果不需要,配置border
为false
即可。
<u-tabbar :value="value7" :placeholder="false" :border="false" @change="name => value7 = name" :fixed="false" :safeAreaInsetBottom="false" > <u-tabbar-item text="首页" icon="home" ></u-tabbar-item> <u-tabbar-item text="放映厅" icon="photo" ></u-tabbar-item> <u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item> <u-tabbar-item text="我的" icon="account" ></u-tabbar-item> </u-tabbar> <!-- data --> value7: 3
✅ Copy success!
# 固定在底部(固定在屏幕最下方)
与原生效果无异,但您可以按照api配置您需要的其他配置,如徽标,边框等
<u-tabbar :value="value6" @change="name => value6 = name" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" > <u-tabbar-item text="首页" icon="home" ></u-tabbar-item> <u-tabbar-item text="放映厅" icon="photo" ></u-tabbar-item> <u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item> <u-tabbar-item text="我的" icon="account" ></u-tabbar-item> </u-tabbar> <!-- data --> value6: 0,
✅ Copy success!
# 此页面源代码地址
# API
# TabBar Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
value | 当前匹配项的name | String | Number | null | - |
safeAreaInsetBottom | 是否为iPhoneX留出底部安全距离 | Boolean | true | false |
border | 是否显示上方边框 | Boolean | true | false |
zIndex | 元素层级z-index | String | Number | 1 | - |
activeColor | 选中标签的颜色 | String | #1989fa | - |
inactiveColor | 未选中标签的颜色 | String | #7d7e80 | - |
fixed | 是否固定在底部 | Boolean | true | false |
placeholder | fixed定位固定在底部时,是否生成一个等高元素防止塌陷 | Boolean | true | false |
# TabBarItem Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
name | item标签的名称,作为与u-tabbar的value参数匹配的标识符 | String | Number | null | - |
icon | uView内置图标或者绝对路径的图片 | String | - | - |
badge | 右上角的角标提示信息 | String | Number | null | - |
dot | 是否显示圆点,将会覆盖badge参数 | Boolean | false | true |
text | 描述文本 | String | - | - |
badgeStyle | 控制徽标的位置,对象或者字符串形式,可以设置top和right属性 | Object | String | 'top: 6px;right:2px;' | - |
# TabBarItem Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 切换选项时触发 | index:当前要切换项的name |
click | 切换选项时触发 | index:当前要切换项的name |