【uniapp】uview 自定义 tabBar 底部导航栏

在 uview1.x 中,不用在 pages.json 里配置 tabBar 属性,比如要在首页配置自定义底部导航栏,就在对应组件中:

		<u-tabbar v-model="current" :list="list" :before-switch="beforeSwitch" inactive-color="#999999"
			active-color="#0D7EDB">
		</u-tabbar>

常用的配置:
current :对应当前激活的图标;
list :导航栏列表;
before-switch :切换调用的钩子函数,参数对应下标;
inactive-color:未激活的文字颜色;
active-color:已激活的文字颜色;

配置菜单列表:

computed: {
		list() {
			const arr = [
				{
					selectedIconPath: '../../../../static/todo1.png',
					iconPath: '../../../../static/todo.png',
					text: "待办",
				},
				{
					selectedIconPath: '../../../../static/stage1.png',
					iconPath: '../../../../static/stage.png',
					text: "首页",
				},
			]
			return arr;
		}
	},

页面跳转:

beforeSwitch(index) {
			if (index === 0) {
				uni.navigateTo({
					url: '/pages/todo/todo'
				})
			} else {
				uni.navigateTo({
					url: '//pages/index/index'
				})
			}
		},

跳转到对应页面,也需要配置 u-tabbar

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花间半盘棋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值