微信小程序tabBar 底部菜单栏不显示的问题解决

问题阐述:

在写微信小程序时需要用到tabBar这个功能,但是在app.json文件中写好pages和tabBar保存刷新编译后,预览页面中没有显示底部tab

"pages": [
    "pages/index/index",
    "pages/todo/todo",
    "pages/diary/diary",
    "pages/record/record"
  ],
  
"window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "demo",
    "navigationBarTextStyle": "black"
  },
  
"tabBar": {
    "list": [{
      "pagePath": "pages/todo/todo",
      "text": "one"
    },{
      "pagePath": "pages/diary/diary",
      "text": "two"
    },{
      "pagePath": "pages/record/record",
      "text": "three"
    } ]
}

问题解决:

1、将pages中的tab页面放到前面,但是index会无法显示,页面直接是tab内容

"pages": [
    "pages/todo/todo",
    "pages/diary/diary",
    "pages/record/record",
    "pages/index/index"
  ],

2、比较好的解决方法是让 tabBar 中包含 index 初始页面这一项

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "one"
    },{
      "pagePath": "pages/diary/diary",
      "text": "two"
    },{
      "pagePath": "pages/record/record",
      "text": "three"
    } ]
}

这样问题就解决了,再次保存刷新编译,底部成功显示出tabBar

猜你喜欢

转载自blog.csdn.net/weixin_43759761/article/details/84758009