0
点赞
收藏
分享

微信扫一扫

wx TabBar使用案例

zibianqu 2022-01-23 阅读 41

1 先建立一个images文件夹存放图标,个位数.png表示未选中的状态,双位数表示选中的状态:
在这里插入图片描述
2 在app.json里面新建三个page页面:
在这里插入图片描述
3 在app.json里面配置tabBar:

 "tabBar": {
    "list": [
      {
        "pagePath": "pages/list/list",
        "text": "首页",
        "iconPath": "/pages/images/1.png",
        "selectedIconPath": "/pages/images/11.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "index页面",
        "iconPath": "/pages/images/2.png",
        "selectedIconPath": "/pages/images/22.png"

      },
      {
        "pagePath": "pages/test/test",
        "text": "test页面",
        "iconPath": "/pages/images/3.png",
        "selectedIconPath": "/pages/images/33.png"

      }
    ]
  },

4 效果如图:
在这里插入图片描述

在这里插入图片描述

举报

相关推荐

0 条评论