微信小程序添加底部导航栏

最新推荐文章于 2024-05-31 22:19:05 发布

原创最新推荐文章于 2024-05-31 22:19:05 发布 · 2.2w 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

1 篇文章

订阅专栏

我们平时上微信可以看到，微信的底部是4个导航栏选项进行切换的，我们自己开发小程序时，如果要添加像微信那样的底部导航栏的话，其实实现方式非常简单，便捷。

在微信小程序开发IDE中，我们新建一个小程序项目，一下这些是必带的原有的一些文件。

要添加底部导航的信息，我们需要在“app.json”这个文件中加入“tabBar”这个参数，例如：

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/首页.png",
        "iconPath": "images/首页.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/分类.png",
        "iconPath": "images/分类.png",
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
        "selectedIconPath": "images/对话信息.png",
        "iconPath": "images/对话信息.png",
        "pagePath": "pages/user/userInfo",
        "text": "我的信息"
      },
    {
        "selectedIconPath": "images/用户.png",
        "iconPath": "images/用户.png",
        "pagePath": "pages/user/userInfo",
        "text": "开心对话"
      }
    ]
  }

这里面的参数说明，可以参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

但是有一点需要注意的是，pagePath这个路径必须在pages这个参数中进行设置，不然会报错，在布局中用到哪些目录的必须在pages中定义。

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/user/userInfo"
  ],

最终设置完进行编译产生的结果为：