uni-app配置底部导航菜单

153 阅读1分钟

微信小程序大家都很熟悉,底部导航菜单也是比较常见的功能点之一,今天就来看看官方配置标准,是如何配置底部导航菜单的

pages.json

pages.json提供了"tabBar"的配置项,可以很方便的配置底部导航菜单,如图所示:

1689259803674.png 其中"list"就是导航配置菜单数据,最少2个,最多5个。

介绍一下其中的几个属性:

1、pagePath:组件路径
2、iconPath:菜单图片路径
3、selectedIconPath:菜单选中时的图片路径
4、text:菜单标题

更多属性,请参考地址:uniapp.dcloud.net.cn/collocation…

值得注意的是,list中的组件路径必须都是在pages已配置好的

最终效果:

image.png

image.png

image.png

这样底部导航菜单我们就配置好了,其实也可以自己编写,但是性能体验会低于原生tabBar,如果不是非必要,就不用自己定义了。