uView 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

#显示徽标

使用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-iconinactive-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

#边框

组件默认带了顶部边框,如果不需要,配置borderfalse即可。

复制代码
<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,
相关推荐
雷达学弱狗2 小时前
链式法则解释上游梯度应用
开发语言·前端·javascript
爱隐身的官人3 小时前
爬虫基础学习-爬取网页项目(二)
前端·爬虫·python·学习
Jackson@ML4 小时前
使用字节旗下的TREA IDE快速开发Web应用程序
前端·ide·trea
计算机学姐6 小时前
基于SpringBoot的社团管理系统【2026最新】
java·vue.js·spring boot·后端·mysql·spring·mybatis
烛阴7 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者7 小时前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js
wayhome在哪7 小时前
Cropper.js 轻松拿捏前端裁剪🤞
javascript·canvas·设计
&白帝&7 小时前
vue2和vue3的对比
javascript·vue.js·ecmascript
江东大都督周总7 小时前
rabbitmq集群
javascript·rabbitmq·ruby
vivi_and_qiao7 小时前
HTML的form表单
java·前端·html