微信小程序——底部导航栏tabBar

微信小程序中的底部导航栏使用tabBar来实现，先来张效果图：

小程序上给出的文档要求里面的item最少2个，最多五个。

这个需要在app.json文件里来配置。

具体的配置内容如下：

"tabBar":{
    "position":"bottom",
    "color":"#333333",
    "selectedColor":"#2487FF",
    "list":[
      {
        "pagePath":"pages/home/home",
        "text":"首页",
        "iconPath":"images/bottom_home_normal.png",
        "selectedIconPath":"images/bottom_home_press.png"
      },
      {
        "pagePath": "pages/warning/warning",
        "text": "预警",
        "iconPath": "images/bottom_police_normal.png",
        "selectedIconPath": "images/bottom_police_press.png"
      },
      {
        "pagePath": "pages/im/room/room",
        "text": "授权",
        "iconPath": "images/bottom_permission_normal.png",
        "selectedIconPath": "images/bottom_permission_press.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text":"我的",
        "iconPath": "images/bottom_mine_normal.png",
        "selectedIconPath": "images/bottom_mine_press.png"
      }
    ]
  },

各属性的意思：

tabBar：底部导航栏配置属性；

position：bottom设置在底部显示；

color：未选中时文字的颜色；

selectedColor：选中时文字的颜色；

list：导航栏item配置属性；

pagePath：点击后显示的页面；

text：tabBar项的标题（导航栏图标下面的文字）；

iconPath：导航栏item未选择时默认显示的图标；

selectedIconPath：导航栏item选中时显示的图标。

官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html

来源：CSDN

作者：时代新人

链接：https://blog.csdn.net/u013184970/article/details/104651398

标签

小程序