uniapp项目实践总结(五)自定义底部导航栏-编程知识

uniapp项目实践总结(五)自定义底部导航栏

在底部导航栏这个模块，很多时候默认的样式不符合我们的设计规范和需求，因此需要自定义底部导航栏，这样可以满足我们的需求，也可以更加个性化，增加用户体验，下面就介绍如何自定义底部导航栏。

准备导航素材

要自定义底部导航栏，我们需要到 iconfont 上面找一些常用的图标，然后保存成图片，存到本地图片文件夹下面。

下面是我准备的一个图标图片文件。

在这里插入图片描述

配置页面导航

接下来开始进行配置，先在pages.json文件里面配置好默认底部导航栏。

{"pages": [//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path": "pages/message/index","style": {"navigationBarTitleText": "消息"}},{"path": "pages/discover/index","style": {"navigationBarTitleText": "发现"}},{"path": "pages/user/index","style": {"navigationBarTitleText": "我的"}}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "HelloApp","navigationBarBackgroundColor": "#333","backgroundColor": "#f8f8f8"},"tabBar": {"borderStyle": "white","backgroundColor": "#fff","color": "#555","selectedColor": "#24afd6",