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

    在微信小程序的開發過程中如果有使用過tabbar的同學,我相信一定會遇到一些困擾。愛掏網 - it200.com為什么有些時候代碼中明明已經在app.json里面增加了tabbar,可以頁面中就是不顯示呢?可不可以有些頁面顯示tabbar,而有些頁面不顯示tabbar呢?今天我把我在開發過程中遇到的問題整理出來跟大家分享。愛掏網 - it200.com
    問題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"
          }
        ]
      }
    }
    登錄后復制

    我們看一下頁面的顯示結果如下:

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

    原因是:pages數組的第一項必須是tabBar的list數組的一員。愛掏網 - it200.com
    我們可以看看上面代碼中的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頁面的條目。愛掏網 - it200.com

    【解決辦法】1.我們在list數組內加入鏈接clickDemo頁面的條目,下面給出了這段代碼。愛掏網 - it200.com

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

    效果如下:

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

    方法2.把pages數組的第一項設置為"pages/index/index",或者設置為"pages/logs/logs"。愛掏網 - it200.com當然這個方法并不是我們所期望看到的。愛掏網 - it200.com經過實踐發現:app.json中pages數組中第一項(首頁),必須在tabBar---list數組中出現,list中第幾個無所謂;但如果首頁不在list里面,當然無法渲染出來,這就可以理解app.json是首次頁面配置了
    問題2:有沒有什么辦法讓小程序首頁不顯示tabbar,而非首頁顯示tabbar?
    這個目前還沒有想到解決辦法,歡迎大家幫忙解答
    問題3:有些頁面并不在tabbar的list頁面里面,為什么頁面底部也顯示tabbar呢?如果從一級頁面 redirectTo到其他頁面,會發現即使其他頁面沒有在 TabBar定義的列表里也會顯示TabBar,該如何解決?
    【解決辦法】假如當前也是一級頁面,到希望跳轉到的頁面不要有Tabbar時,不要使用 redirectTo而是使用 navigateTo就可以了。愛掏網 - it200.com

    以上就是詳解微信小程序開發過程中tabbar頁面顯示問題的解決辦法的詳細內容,更多請關注愛掏網 - it200.com其它相關文章!

    聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
    發表評論
    更多 網友評論0 條評論)
    暫無評論

    返回頂部

    主站蜘蛛池模板: 国产成人精品一区二三区 | 无码人妻精品一区二区三区夜夜嗨 | 亚洲国产综合精品中文第一区| 亚洲AV日韩综合一区尤物| 国产成人精品久久一区二区三区av | 国产成人无码一区二区三区| 韩国精品福利一区二区三区| 蜜桃无码AV一区二区| 国产精品无码一区二区三区电影 | 国产成人精品视频一区| 国产经典一区二区三区蜜芽| 免费一区二区三区| 国产一区二区三区夜色| 一区二区手机视频| 日本精品3d动漫一区二区| 亚洲欧美日韩中文字幕一区二区三区| 无码人妻精品一区二区| 久久99精品波多结衣一区| 精品亚洲一区二区| 亚洲乱码国产一区三区| 狠狠色婷婷久久一区二区三区| 日本一区视频在线播放| 老湿机一区午夜精品免费福利| 国产成人综合亚洲一区| 一区二区高清视频在线观看| 无码人妻一区二区三区精品视频 | 精品女同一区二区三区免费站| 国产精品一区二区久久国产| 久久精品一区二区影院 | 日韩a无吗一区二区三区| 精品无人乱码一区二区三区| 手机福利视频一区二区| 国产免费私拍一区二区三区| 全国精品一区二区在线观看| 一区二区三区福利视频| 国精产品一区一区三区免费视频| 精品一区二区三区免费| 日韩一区二区视频在线观看| 香蕉久久ac一区二区三区| 成人免费视频一区二区| 日本精品高清一区二区|