微信小程序開發過程當中tabbar頁面顯示的相關問題及解決辦法

在微信小程序的開發過程當中若是有使用過tabbar的同窗，我相信必定會遇到一些困擾。爲何有些時候代碼中明明已經在app.json裏面增長了tabbar，能夠頁面中就是不顯示呢？可不能夠有些頁面顯示tabbar，而有些頁面不顯示tabbar呢？今天我把我在開發過程當中遇到的問題整理出來跟你們分享。
問題1：爲何頁面底部不顯示tabbar？
不少網友（包括我本身）也遇到過此類問題，在app.json裏面明明加了tabbar，list裏面也加了路徑怎麼就是不顯示呢？舉例，以下代碼，爲何屏幕頁面底部沒有如期出現tabbar呢？

{
  "pages":[
    "pages/clickDemo/clickDemo",
    "pages/logs/logs",
    "pages/index/index",
    "pages/mypage/mypage"
  ],
  "window": {
    "backgroundTextStyle": "dark ",
    "navigationBarBackgroundColor": "#ddd",
    "navigationBarTitleText": "Tabbar Demo",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#ff0000"
  },
  "tabBar": {
    "color": "#000000",
    "borderStyle": "#000",
    "selectedColor": "#9999FF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "image/location_normal.png",
        "selectedIconPath": "image/location_selected.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "設置",
        "iconPath": "image/setting_normal.png",
        "selectedIconPath": "image/setting_selecred.png"
      }
    ]
  }
}

咱們看一下頁面的顯示結果以下：

緣由是：pages數組的第一項必須是tabBar的list數組的一員。咱們能夠看看上面代碼中的pages數組的內容是：

"pages":[
"pages/clickDemo/clickDemo",
"pages/logs/logs",
"pages/index/index",
"pages/mypage/mypage"
]

tabbar中list數組內容是：

"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "image/location_normal.png",
"selectedIconPath": "image/location_selected.png"
},
{
"pagePath": "pages/logs/logs",
"text": "設置",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
}

是否是發現爲何底部不出現TabBar？緣由在於，app.json頭部的pages數組的第一項"pages/clickDemo/clickDemo"沒有成爲tabBar的一員，也就是在tabBar的list數組內沒有連接clickDemo頁面的條目。

【解決辦法】1.咱們在list數組內加入連接clickDemo頁面的條目，下面給出了這段代碼。

{
  "pagePath": "pages/clickDemo/clickDemo",
  "text": "事件Demo",
  "iconPath": "image/setting_normal.png",
  "selectedIconPath": "image/setting_selecred.png"
}

效果以下：

方法2.把pages數組的第一項設置爲"pages/index/index"，或者設置爲"pages/logs/logs"。固然這個方法並非咱們所指望看到的。通過實踐發現：app.json中pages數組中第一項（首頁），必須在tabBar---list數組中出現，list中第幾個無所謂；但若是首頁不在list裏面，固然沒法渲染出來，這就能夠理解app.json是首次頁面配置了

問題2：有沒有什麼辦法讓小程序首頁不顯示tabbar，而非首頁顯示tabbar？
這個目前尚未想到解決辦法，歡迎你們幫忙解答

問題3：有些頁面並不在tabbar的list頁面裏面，爲何頁面底部也顯示tabbar呢？若是從一級頁面 redirectTo到其餘頁面，會發現即便其餘頁面沒有在 TabBar定義的列表裏也會顯示TabBar，該如何解決？

【解決辦法】假如當前也是一級頁面，到但願跳轉到的頁面不要有Tabbar時，不要使用 redirectTo而是使用 navigateTo就能夠了。