微信小程序学习之底部导航栏

小新110

已于 2025-06-11 08:56:05 修改

阅读量544

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序导航栏

于 2025-05-13 16:46:16 首次发布

本文链接：https://blog.youkuaiyun.com/cau_eric/article/details/147928186

微信小程序专栏收录该内容

27 篇文章

订阅专栏

首先，我们在app.json中添加4个页面，

"pages": [
    "pages/index/index",
    "pages/category/category",
    "pages/cart/cart",
    "pages/user/user"
  ],

其次我们把8张图片放到imaes文件夹下，

图标可以去https://www.iconfont.cn/下载

然后添加tabBar项(已经加上注释)：

"tabBar": {
    // 文字的颜色
    "color": "#666",
    // 选中项文字颜色
    "selectedColor": "#fa2c19",
    // 导航的栏目
    "list":[
      {
        // 导航页面的地址
        "pagePath": "pages/index/index",
        // 导航项的说明文字
        "text": "首页",
        // 导航项的默认图片
        "iconPath": "./images/shouye.png",
        // 导航项的选中图片
        "selectedIconPath": "./images/shouye_select.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "类别",
        "iconPath": "./images/leibie.png",
        "selectedIconPath": "./images/leibie_select.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "./images/gouwuche.png",
        "selectedIconPath": "./images/gouwuche_select.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "用户",
        "iconPath": "./images/yonghu.png",
        "selectedIconPath":"./images/yonghu_select.png"
      }
    ]
  }

保存。

效果图：