解决微信小程序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"
    }]
  }
}

版权声明:著作权归作者所有。

相关推荐

解决IE11 Flex布局文本不换行的问题

在页面上使用了flex来布局,代码如下:CSS:.container{     display: flex;     flex-direction: column;     border: 1px solid red;     align-items: center;   }   .item {     border: 

微信小程序页面跳转的几种方法

本文总结了微信小程序页面跳转分为这几种类型:navigate:跳转页面,并保留当前页面。前一个页面可以使用navigateBack类型的跳转退回。redirect:关闭当前页面,然后跳转到新页面。switchTab:跳转到tabBar页面(在app.json中注册过的tabBar页面),同时关闭其他非tabBar页面。navigateBack:页面退回。微信原生提供的APInavigateTowx

Android:解决android.os.NetworkOnMainThreadException问题

原因当应用在主线程执行网络操作时会抛出此异常android.os.NetworkOnMainThreadException。解决方法把执行网络的操作的代码放到AsyncTask里可以避免此问题。示例:class MyConnectTas extends AsyncTask {     @Override  &

解决iPhone X上下黑边的问题

在iPhone X上直接运行已有的App,App的上下出现黑边:解决方法iPhone X的显示屏为1125px × 2436px (375pt × 812pt @3x),相比于4.7寸的iPhone6,iPhone7以及iPhone8,iPhone X的宽度和4.7寸的屏幕一样,而高度则比4.7寸屏幕多出14