微信小程序bug之tabBar不显示

最新推荐文章于 2024-10-25 10:45:11 发布

原创最新推荐文章于 2024-10-25 10:45:11 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了在配置app.json中的tabBar后，底部图标和文字未显示的问题。从大小写、list索引、逗号使用、注释避免、首页配置及页面地址定义等方面，逐一排查并解决常见错误。

近日做答辩的时候，发现在配置好了app.json里面的tabBar以后，页面底部却未显示图标和文字，去百度了并了一下发现了大家各种错误的集合，在加上我的这个错误犯的简直巧妙，于是一并整理了下来：

大小写区分，tabBar就是这样写的啊，别写成tabbar啦，
list里面包含的数列是从list [0]开始的，看报错的时候别看错了哦，
关于每项数列后面打逗号，最后一项不用逗号大家应该早就get到了吧，
还有json文件的特殊性之一就是，他的代码不能注释，千万不要写注释，

在BarTab中的List属性，里面的index首页配置，一定要放置在第一项

"list":[
      {
      "pagePath":"pages/logs/logs",
      "text":"首页",
      "iconPath":"pic/main.png",
      "selectedIconPath":"pic/main.png"
    }]

如若你的初始页面里面没有tabBar地址定义的部分，那么就不能在pages里面的开始就定义初始页面的地址，必须把tabbar的地址定义在开始部分，也就是：

 "pages":[
    "pages/logs/logs",
    "pages/join/join",
    "pages/index/index"
  ],

如果以上都没有问题，你还是滑不到底部的tabBar的话，那么请您将鼠标稍稍右移，您不会不知道有两个滚轮吧：

再或者，直接把显示器的比例改小点，85%差不多了

正确的配置如下：

{
  "pages":[
    "pages/logs/logs",
    "pages/join/join",
    "pages/index/index"
  ],

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "启明星工作室",
    "navigationBarTextStyle":"black"
  },

  "tabBar":{
    "list":[
      {
      "pagePath":"pages/index/index",
      "text":"首页",
      "iconPath":"pic/main.png",
      "selectedIconPath":"pic/main.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "立即报名",
      "iconPath": "pic/join.png",
      "selectedIconPath": "pic/join.png"      
    }
    ]
  }
}