微信小程序快速设置底部导航栏

喜欢ヅ旅行 2022-03-27 01:08 532阅读 0赞

## 效果图 ##

![在这里插入图片描述][20190111154238218.png]  
下面直接上代码吧

## 1：找到项目根目录中的配置文件 app.json 加入如下配置信息 ##

"tabBar": {
        "color": "#a9b7b7",
        "selectedColor": "#11cd6e",
        "borderStyle": "white",
        "list": [
          {
            "selectedIconPath": "assets/shouye1.png",
            "iconPath": "assets/shouye.png",
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "selectedIconPath": "assets/fenlei1.png",
            "iconPath": "assets/fenlei.png",
            "pagePath": "pages/index/index",
            "text": "分类"
          },
          {
            "selectedIconPath": "assets/gouwuche1.png",
            "iconPath": "assets/gouwuche.png",
            "pagePath": "pages/index/index",
            "text": "购物车"
          },
          {
            "selectedIconPath": "assets/wode1.png",
            "iconPath": "assets/wode.png",
            "pagePath": "pages/index/index",
            "text": "我的"
          }
        ]
      }

保存 编译就会出现效果图的效果了

## 2：下面给你们解释一下每个属性的意思： ##

tabBar 指底部的 导航配置属性

color 未选择时 底部导航文字的颜色

selectedColor 选择时 底部导航文字的颜色

borderStyle 底部导航边框的样色（注意： 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）

list 导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

## 3：注意图片的路径不要写错了！！！ ##

给你们参考一下我写的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]

## 图标小提示：想要底部导航栏图标的话可以去阿里矢量图官方网站去找 ##

下载地址：[https://www.iconfont.cn/][https_www.iconfont.cn]

[20190111154238218.png]: /images/20220327/cb4211d74b9b44f3aa332f6bf3270fdd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]: /images/20220327/b193c4a0d9b7440b99a243b4989d82eb.png
[https_www.iconfont.cn]: https://www.iconfont.cn/