发布于 2年前

解决微信小程序tabBar不显示的问题

学习微信小程序,给小程序添加tabBar后,tabBar但始终不显示。

app.json如下:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/users/users"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "position":"top",
    "color":"#fff",
    "selectedColor": "#333",
    "backgroundColor":"#eee",
    "list": [{
      "pagePath": "pages/logs/logs",
      "text": "logs"
    }, {
      "pagePath":"pages/users/users",
      "text":"user"
    }]
  }
}

搜索了一下,发现tabBar显示需要满足:pages数组里配置的第一项为启动进来的首页,此路径需要配置在tabBar的list里。

解决方法:

方法一、在tabBar的list里添加pages第一项的路径。如例子里添加tab为pages/index/index

"list": [{
      "pagePath": "pages/index/index",
      "text": "index"
    },{
      "pagePath": "pages/logs/logs",
      "text": "logs"
    }, {
      "pagePath":"pages/users/users",
      "text":"user"
    }]

方法二、在tabBar里配置的tab选择其中一个路径放置在pages数组的第一项。如把pages/logs/logs放在pages数组的第一项。

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

按方法一最后修改的app.json为:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/users/users"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "position":"top",
    "color":"#fff",
    "selectedColor": "#333",
    "backgroundColor":"#eee",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "index"
    },{
      "pagePath": "pages/logs/logs",
      "text": "logs"
    }, {
      "pagePath":"pages/users/users",
      "text":"user"
    }]
  }
}
©2020 edoou.com   京ICP备16001874号-3