小程序中在app.json中配置的tabBar问题

在自学小程序的过程中,在app.json中配置的tabbar,到底在哪个页面起作用呢?后来终于搞明白了

"tabBar": {
    "selectedColor": "#9400D3",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "比较"
      },
      {
        "pagePath": "pages/demo2/demo",
        "text": "表格"
      },
      {
        "pagePath": "pages/index/ex3jisuanqi",
        "text": "计算器"
      }
    ]
  },


如图配置,pagePath中有哪个页面就在哪个页面起作用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
app.json 文件设置底部导航栏的样式和内容,具体步骤如下: 1. 打开微信开发者工具,选择需要添加底部导航栏的小程序项目,并进入项目根目录。 2. 在项目根目录下找到 app.json 文件,并打开该文件。 3. 在 app.json 文件找到 tabBar 属性,并设置导航栏的样式和包含的页面路径。具体来说,tabBar 属性包含以下几个字段: - color:未选的 tab 标签的颜色。 - selectedColor:选的 tab 标签的颜色。 - backgroundColor:tab 标签栏的背景色。 - borderStyle:tab 标签栏的边框样式,可选值为 black、white。 - list:tab 标签的列表,每个 tab 标签包含以下几个字段: - pagePath:页面路径,必须在 pages 定义。 - text:tab 显示的文字。 - iconPath:未选的 tab 图标的路径,大小限制为40kb。 - selectedIconPath:选的 tab 图标的路径,大小限制为40kb。 例如,以下是一个包含三个 tab 的 tabBar 配置示例: ``` "tabBar": { "color": "#999", "selectedColor": "#007aff", "backgroundColor": "#f7f7f7", "borderStyle": "black", "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/tabbar/home.png", "selectedIconPath": "images/tabbar/home_selected.png" },{ "pagePath": "pages/order/order", "text": "订单", "iconPath": "images/tabbar/order.png", "selectedIconPath": "images/tabbar/order_selected.png" },{ "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "images/tabbar/mine.png", "selectedIconPath": "images/tabbar/mine_selected.png" }] } ``` 4. 保存 app.json 文件,并重新编译运行小程序项目,即可在底部看到已经添加了相应的导航栏。 需要注意的是,添加底部导航栏后,每个页面的 navigationBarHidden 属性会被设置为 true,即隐藏了原有的顶部导航栏。如果需要在某个页面显示顶部导航栏,可以在该页面的配置文件将 navigationBarHidden 属性设置为 false。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值