微信小程序之二——底部选项卡的制作(ToolBar)

时间:2024-05-18 17:51:10

在小程序里只能设置一个toolBar,在app.json中配置。

先看代码:

"tabBar":{

  "list":[

  {

    "pagePath":"pages/firstpage/firstpage",

    "text":"首页",

    "iconPath": "/pages/image/u241.png",

    "selectedIconPath": "/pages/image/u108.png"

  },

  {

    "pagePath":"pages/mine/mine",

    "text": "我的",

    "iconPath":"/pages/image/u113.png",

   "selectedIconPath":"/pages/image/u243.png"

  }

  ]

}

 

toolBar里是一个list数组,list[{},{},{}...],最多有五个标签,最少两个,{}里面设置每个选项卡的样式,

"pagePath":"XXX" 是表示页面路径, "text":"XX" 表示选项的内容,"iconPath": "XX.png" 表示选项的图标,默认是未被选中的, "selectedIconPath": "XX.png" 表示选中时的图标,这两项后面都要加图片的后缀名;

这样就可以显示了,之后再慢慢在两个页面里设计样式。

微信小程序之二——底部选项卡的制作(ToolBar)