Tabbar 底部导航栏

优点：

此组件提供了自定义 tabbar 的能力，具有如下特点：

• 图标可以使用字体图标(内置图标和扩展图标)或者图片
• 可以动态切换菜单的数量以及配置
• 切换菜单之前，可以进行回调鉴权
• 可以设置角标或数字化提示
• 有效防止组件区域高度塌陷，无需给父元素额外的内边距或者外边距来避开导航的区域

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本使用

推荐您使用 list 数组遍历循环，案例使用基础方式构建，请根据click事件回调进行后续逻辑操作。

<up-tabbar
  :value="value1"
  @change="change1"
  :fixed="false"
  :placeholder="false"
  :safeAreaInsetBottom="false"
>
  <up-tabbar-item text="首页" icon="home" @click="click1"></up-tabbar-item>
  <up-tabbar-item text="放映厅" icon="photo" @click="click1"></up-tabbar-item>
  <up-tabbar-item text="直播" icon="play-right" @click="click1"></up-tabbar-item>
  <up-tabbar-item text="我的" icon="account" @click="click1"></up-tabbar-item>
</up-tabbar>
<!-- js -->
value1: 0, click1(e) { console.log('click1', e); }

显示徽标

使用dot属性添加--小点--类型徽标，使用badge属性添加--数字--类型徽标。您也可以使用:badge='badge'动态设置徽标数量， 这在消息盒子的展示中是比较好用的功能，

<up-tabbar
  :value="value2"
  :placeholder="false"
  @change="name => value2 = name"
  :fixed="false"
  :safeAreaInsetBottom="false"
>
  <up-tabbar-item text="首页" icon="home" dot></up-tabbar-item>
  <up-tabbar-item text="放映厅" icon="photo" badge="3"></up-tabbar-item>
  <up-tabbar-item text="直播" icon="play-right"></up-tabbar-item>
  <up-tabbar-item text="我的" icon="account"></up-tabbar-item>
</up-tabbar>
<!-- data -->
value2: 1,

匹配标签的名称

<up-tabbar
  :placeholder="false"
  :value="value3"
  @change="name => value3 = name"
  :fixed="false"
  :safeAreaInsetBottom="false"
>
  <up-tabbar-item text="首页" icon="home" name="home"></up-tabbar-item>
  <up-tabbar-item text="放映厅" icon="photo" name="photo"></up-tabbar-item>
  <up-tabbar-item
    text="直播"
    icon="play-right"
    name="play-right"
  ></up-tabbar-item>
  <up-tabbar-item text="我的" name="account" icon="account"></up-tabbar-item>
</up-tabbar>
<!-- data -->
value3: 'play-right',

自定义图标/颜色

如您需要自定义图标/颜色，在u-tabbar-item标签中使用插槽active-icon和inactive-icon来定义图标和颜色

<up-tabbar
  :value="value4"
  @change="name => value4 = name"
  :fixed="false"
  :placeholder="false"
  activeColor="#d81e06"
  :safeAreaInsetBottom="false"
>
  <up-tabbar-item text="首页">
    <image
      class="u-page__item__slot-icon"
      slot="active-icon"
      src="https://xxx.com/common/bell-selected.png"
    ></image>
    <image
      class="u-page__item__slot-icon"
      slot="inactive-icon"
      src="https://xxx.com/common/bell.png"
    ></image>
  </up-tabbar-item>
  <up-tabbar-item text="放映厅" icon="photo"></up-tabbar-item>
  <up-tabbar-item text="直播" icon="play-right"></up-tabbar-item>
  <up-tabbar-item text="我的" icon="account"></up-tabbar-item>
</up-tabbar>
<!-- data -->
value4: 0,

拦截切换事件(点击第二个标签)

在切换事件中，处理拦截事件或者您其他 js 操作逻辑。

<up-tabbar
  :value="value5"
  :fixed="false"
  @change="change5"
  :safeAreaInsetBottom="false"
  :placeholder="false"
>
  <up-tabbar-item text="首页" icon="home"></up-tabbar-item>
  <up-tabbar-item text="放映厅" icon="photo"></up-tabbar-item>
  <up-tabbar-item text="直播" icon="play-right"></up-tabbar-item>
  <up-tabbar-item text="我的" icon="account"></up-tabbar-item>
</up-tabbar>
<!-- data -->
value5: 0,
<!-- js -->
change5(name) { if (name === 1) return uni.$up.toast('请您先登录') else
this.value5 = name },

边框

组件默认带了顶部边框，如果不需要，配置border为false即可。

<up-tabbar
  :value="value7"
  :placeholder="false"
  :border="false"
  @change="name => value7 = name"
  :fixed="false"
  :safeAreaInsetBottom="false"
>
  <up-tabbar-item text="首页" icon="home"></up-tabbar-item>
  <up-tabbar-item text="放映厅" icon="photo"></up-tabbar-item>
  <up-tabbar-item text="直播" icon="play-right"></up-tabbar-item>
  <up-tabbar-item text="我的" icon="account"></up-tabbar-item>
</up-tabbar>
<!-- data -->
value7: 3

固定在底部(固定在屏幕最下方)

与原生效果无异，但您可以按照 api 配置您需要的其他配置，如徽标，边框等

<up-tabbar
  :value="value6"
  @change="name => value6 = name"
  :fixed="true"
  :placeholder="true"
  :safeAreaInsetBottom="true"
>
  <up-tabbar-item text="首页" icon="home"></up-tabbar-item>
  <up-tabbar-item text="放映厅" icon="photo"></up-tabbar-item>
  <up-tabbar-item text="直播" icon="play-right"></up-tabbar-item>
  <up-tabbar-item text="我的" icon="account"></up-tabbar-item>
</up-tabbar>
<!-- data -->
value6: 0,

此页面源代码地址

页面源码地址

 github  gitee

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