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

news2025/1/31 10:43:27

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

准备导航素材

要自定义底部导航栏，我们需要到 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",