优点：
此组件提供了自定义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
#显示徽标
使用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
#匹配标签的名称
<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
#自定义图标/颜色
如您需要自定义图标/颜色，在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
#拦截切换事件(点击第二个标签)
在切换事件中，处理拦截事件或者您其他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
#边框
组件默认带了顶部边框，如果不需要，配置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
#固定在底部(固定在屏幕最下方)
与原生效果无异，但您可以按照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,
