微信小程序之底部栏tabBar

最新推荐文章于 2025-06-26 09:03:02 发布

原创最新推荐文章于 2025-06-26 09:03:02 发布 · 762 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

本文介绍了微信小程序中底部导航栏tabBar的使用，强调了tabBar需在app.json配置，并提供了配置示例及自定义效果展示。同时，分享了图片资源的存储建议和阿里巴巴矢量图标库的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tabBar是微信小程序的底部导航栏，它是微信自带的一个框架。
微信小程序自定义tabBar的描述
tabBar需要在app.json书写。

这是我的app.json

{
  "pages":[
    "pages/index/index",
    "pages/games/games",
    "pages/videos/videos",
    "pages/me/me"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "selectedColor": "#44b549",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "学习笔记",
        "iconPath": "./images/tabBar/notes-unselected.png",
        "selectedIconPath": "./images/tabBar/notes-selected.png"
      },
      {
        "pagePath": "pages/games/games",
        "text": "游戏新闻",
        "iconPath": "./images/tabBar/news-unselected.png",
        "selectedIconPath": "./images/tabBar/news-selected.png"
      },
      {
        "pagePath": "pages/videos/videos",
        "text": "影剧评价",
        "iconPath": "./images/tabBar/tv-unselected.png",
        "selectedIconPath": "./images/tabBar/tv-selected.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "./images/tabBar/me-unselected.png",
        "selectedIconPath": "./images/tabBar/me-selected.png"
      }
    ]
  }
}

实现效果图如下。
在这里插入图片描述
接下来说明tabBar的各种属性。
里面所常用的各种属性

"selectedColor": "#44b549"  //选中时的字体颜色
"backgroundColor": "#fff"  //背景颜色
"list": [] //导航配置数组(需要大于等于2个)
"pagePath": "pages/index/index"  //页面地址
"text": "学习笔记"  //底部栏所对应的文字
"iconPath": "./images/tabBar/notes-unselected.png"  //未选中时的图片地址
"selectedIconPath": "./images/tabBar/notes-selected.png"   //选中时的图片地址

图片地址建议在根目录下创建文件夹images储存图片。
我的图片是从阿里巴巴矢量图标库里面下载的，找到适合自己的图片下载。

目前就记录到这先了，后续想到再补充。