微信小程序tabBar的使用规范

最新推荐文章于 2024-12-23 16:10:51 发布

「已注销」

最新推荐文章于 2024-12-23 16:10:51 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/longlingjing/article/details/89134113

本文详细介绍了微信小程序中tabBar的设置规范，包括其安放位置、使用符号和各项属性，如list、color、selectedColor、backgroundColor、borderStyle、position等，并提供了具体的示例，帮助开发者实现自定义tabBar。

tabBar的安放位置

“tabBar"与"pages”、"window"是并列关系，之间用逗号隔开。

tabBar的使用符号

先用""号将tabBar括起来，紧接着加上:号，用{ }存放tabBar的属性

tabBar的属性

list列表

"list"是一个数组，内部至少有两项，至多有五项，且按顺序显示。

list的属性

pagePath
text
iconPath
selectedIconPath

color文字默认颜色

“color”: “只支持十六进制颜色”

selectedcolor文字选中时的颜色

“selectedcolor”: “只支持十六进制颜色”

backgroundColor背景色

“backgroundColo”: “只支持十六进制颜色”

borderStyle上边框的颜色

“borderStyle”: “只支持black / white”

position位置

“position”: “只支持bottom / top”

custom自定义

“custom”: “true”

tabBar示例

{
  "pages": [
    "pages/index/index"
    "pages/llj/llj",
    "pages/lf/lf",
    "pages/lj/lj",
    "pages/zxl/zxl"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "1"
      },
      {
        "pagePath": "pages/llj/llj",
        "text": "2"
      },
      {
        "pagePath": "pages/lj/lj",
        "text": "3"
      },
      {
        "pagePath": "pages/lf/lf",
        "text": "4"
      },
      {
        "pagePath": "pages/zxl/zxl",
        "text": "5"
      }
    ],
    "color": "#999900",
    "selectedColor": "#cc0000",
    "backgroundColor": "#33FFFF",
    "position": "top"
  }
}