小程序学习之路第一步——底部选项卡toolBar实现

在app.json中配置tabBar参数

1、代码示例

"tabBar": {
    "color": "#13227a",
    "selectedColor": "#368ff9",
    "backgroundColor": "#edeeef",
    "position": "bottom",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/pages/images/icon_home.png",
        "selectedIconPath": "/pages/images/icon_home_active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "我的",
        "iconPath": "/pages/images/icon_mine.png",
        "selectedIconPath": "/pages/images/icon_mine_active.png"
      }
    ]
  }

2、参数说明

参数选项	备注	参数类型	默认值
tabBar	tabBar组件	Object( {} )
color	tabBar默认文字颜色	String
selectedColor	tabBar选中文字颜色	String
backgroundColor	tabBar背景颜色	String
position	tabBar定位位置	String	bottom
borderStyle	tabBar上边框颜色	String	black
list	选项内容集合最多五个	Array
pagePath	页面路径	String
text	选项内容	String
iconPath	选项未选中图标	String
selectedIconPath	选项选中图标	String

3、页面展示效果