微信小程序多页面快速切换 tabBar

原创

已于 2022-11-03 11:19:52 修改 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

于 2022-10-31 20:02:24 首次发布

在微信小程序中，tabBar最多设置5个tab标签，最少设置2个标签，分为底部tabBar，顶部tabBar，在渲染顶部tabBar时，不显示图标；

tabBar的6个组成部分

1、backgroundColor：tabBar的背景色

2、selectedIconPath：选中时的图片路径

3、borderStyle：tabBar上边框的颜色

4、iconPath：未选中时的图片路径

5、selectedColor：tab上的文字选中时的颜色

6、color：tab上文字的默认（未选中）颜色

如何配置tabBar：

在app.json中，与Windows节点平级，加上tabBar节点，里面包含list集合，集合中包含pagePath和text，其中pagePath代表点击tab页时显示的页面，直接在Pages节点中复制粘贴即可，text代表tab页的文字

在app.json中

"tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/修改密码.png",
      "selectedIconPath": "/images/选择角色.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/样式.png",
      "selectedIconPath": "/images/样式设置.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/firsttab.png",
      "selectedIconPath": "/images/firsttab-active.png"
    }