1.项目目录

微信小程序之 Tabbar(底部选项卡)

2.在app.json里填写:tab个数范围2-5个

app.json

{
  "pages": [
    "pages/index/index",
    "pages/audiobook/audiobook",
    "pages/broadcast/broadcast",
    "pages/group/group",
    "pages/mine/mine"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#949494",
    "selectedColor": "#42bd56",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "assets/images/ic_tab_home_active.png",
        "iconPath": "assets/images/ic_tab_home_normal.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "assets/images/ic_tab_subject_active.png",
        "iconPath": "assets/images/ic_tab_subject_normal.png",
        "pagePath": "pages/audiobook/audiobook",
        "text": "书影音"
      },
      {
        "selectedIconPath": "assets/images/ic_tab_status_active.png",
        "iconPath": "assets/images/ic_tab_status_normal.png",
        "pagePath": "pages/broadcast/broadcast",
        "text": "广播"
      },
      {
        "selectedIconPath": "assets/images/ic_tab_group_active.png",
        "iconPath": "assets/images/ic_tab_group_normal.png",
        "pagePath": "pages/group/group",
        "text": "小组"
      },
      {
        "selectedIconPath": "assets/images/ic_tab_profile_active.png",
        "iconPath": "assets/images/ic_tab_profile_normal.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
}

3.属性详解

微信小程序之 Tabbar(底部选项卡)

4.效果图

微信小程序之 Tabbar(底部选项卡)

 

相关文章:

  • 2021-05-07
  • 2021-06-25
  • 2022-12-23
  • 2021-09-22
  • 2022-01-22
  • 2021-07-29
  • 2021-11-13
  • 2021-06-01
猜你喜欢
  • 2021-09-12
  • 2021-05-31
  • 2021-08-05
  • 2021-12-24
  • 2021-05-15
  • 2022-12-23
  • 2021-10-25
相关资源
相似解决方案