UniAPP开发,首页底部需展示导航栏,其他页面不需要,如何实现?

一:问题产生

因为公司的业务需求,需要将小程序从A主体公司迁移到B主体公司。

二:说干就干

目的确定好了,就干呗,开始迁移,项目拉取,修改,编译,运行,成功的跑了起来,但是发现与前面发布运行的小程序少了一点啥。没错,就是少了底部导航栏,之前为什么有,为什么现在拉取项目却发现没有,原因只有一个,那就是后面开发的同事把底部导航栏的代码删除后,然后再上传到了代码仓库。

三:问题解决

然后打开文档,发先原生的tabBar即可解决上述问题。

参考文档链接:pages.json 页面路由 | uni-app官网

我也把文档代码copy到这里,里面的属性文档有详细的解释。

"tabBar": {
	"color": "#7A7E83",
	"selectedColor": "#3cc51f",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
		"pagePath": "pages/component/index",
		"iconPath": "static/image/icon_component.png",
		"selectedIconPath": "static/image/icon_component_HL.png",
		"text": "组件"
	}, {
		"pagePath": "pages/API/index",
		"iconPath": "static/image/icon_API.png",
		"selectedIconPath": "static/image/icon_API_HL.png",
		"text": "接口"
	}]
}

 注:

  • 这个tabBar代码得放在pages.json里面。
  • tabBar中list中的页面路径,得放在pages里面。

就这样,问题就得到解决咯,细节方面就根据自己的需求,慢慢调整即可。

四:更多的导航栏资源链接就放在下面了

tabbar自定义底部标签栏菜单 - DCloud 插件市场

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值