微信小程序底部导航栏

秒速五厘米 2024-04-17 05:31 87阅读 0赞

**“花树得晴红欲染，远山过雨青如滴”**

## 序 ##

最近自己在研究微信小程序，几乎每个程序都会有导航栏，或在顶部，或在底部。于是我简单做了一个导航栏在底部的程序。

## 正文 ##

这里就直接贴代码了：

在app.json里面添加tabBar

"tabBar": {
        "color": "#a9b7b7",
        "selectedColor": "#11cd6e",
        "borderStyle": "white",
        "list": [
          {
            "selectedIconPath": "images/home_selected.png",
            "iconPath": "images/home.png",
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "selectedIconPath": "images/add_selected.png",
            "iconPath": "images/add.png",
            "pagePath": "pages/deploy/deploy",
            "text": "发布"
          },
          {
            "selectedIconPath": "images/account_selected.png",
            "iconPath": "images/account.png",
            "pagePath": "pages/account/account",
            "text": "我的"
          }
        ]
      }

解释一下属性的作用：

tabBar  指底部的 导航配置属性
    color  未选择时 底部导航文字的颜色
    selectedColor  选择时 底部导航文字的颜色
    borderStyle  底部导航边框的样色
    list   导航配置数组
    selectedIconPath 选中时 图标路径
    iconPath 未选择时 图标路径
    pagePath 页面访问地址
    text  导航图标下方文字

具体请看官方文档：[微信官方文档：Tabbar][Tabbar]

效果是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfUnVubmVy_size_16_color_FFFFFF_t_70]

[Tabbar]: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfUnVubmVy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/0857362d531d42ee952cbfa969a4aa59.png