午夜精品视频|亚洲AV无码一区二区久久观看|一二三在线欧美|亚洲aAv无码三区在线播放国产

2大專利產(chǎn)品: FEIMAOCMS + 肥貓推推

自研全新一代AI智慧網(wǎng)站系統(tǒng) | 20000+客戶案例 | 全行業(yè)解決方案提供商

FEIMAOCMS?采用第三代SAAS技術(shù)，首創(chuàng)雙核智慧數(shù)據(jù)引擎，內(nèi)置強大自研肥貓推推營銷系統(tǒng)，引領(lǐng)網(wǎng)站進入AI智慧時代。

微信小程序tabbar怎么用

作者：肥貓科技發(fā)布時間：2023-10-17 09:19 欄目：微信小程序

微信小程序tabbar怎么用

什么是tabbar

tabbar是指小程序底部的選項卡欄，在底部可以顯示多個頁面，并且可以實現(xiàn)在不同頁面之間切換。所以在開發(fā)小程序時，tabbar是必不可少的。

如何使用tabbar

首先，在app.wxss中定義底部tabbar的樣式：


       .tabBar { 
          border-top: 1px solid #e5e5e5;
          position: fixed; 
          bottom: 0; 
          left: 0; 
          width: 100%; 
          height: 98rpx; 
          background-color: #fff; 
          display: flex;
      }

然后在app.json文件中配置tabBar節(jié)點，其中l(wèi)ist中至少要有兩個list-item，最多支持五個。每個list-item都要設(shè)置頁面路徑、選中后的圖標(biāo)和未選中的圖標(biāo)。


      "tabBar": {
        "color": "#999",
        "selectedColor": "#1afa29",
        "borderStyle": "black",
        "backgroundColor": "#fafafa",
        "list": [
          {
            "pagePath": "pages/index/index",
            "iconPath": "/images/icon_home.png",
            "selectedIconPath": "/images/icon_home_HL.png",
            "text": "首頁"
          },
          {
            "pagePath": "pages/logs/logs",
            "iconPath": "/images/icon_logs.png",
            "selectedIconPath": "/images/icon_logs_HL.png",
            "text": "日志"
          }
        ]
      }

最后，在各個頁面中就可以使用上述配置的tabBar了。如果要顯示未選中狀態(tài)，需要在page.onLoad中設(shè)置：


       wx.setTabBarBadge({
          index: 1, //對應(yīng)的 tabBar 的哪一項，從左邊算起
          text: '99+' //顯示的文本，不超過 3 個半角字符
        })

注意事項

1. tabbar所在的頁面必須是app.json中定義的tabBar路徑準(zhǔn)確匹配的一個；
2. 若項目根目錄下存在custom-tab-bar文件，則小程序會忽略tabBar節(jié)點，采用自定義的tabBar；
3. 當(dāng)前頁面與跳轉(zhuǎn)頁面中均有tabbar時，需要對應(yīng)修改上面json文件中l(wèi)ist里的pagepath，以保證跳轉(zhuǎn)時能繼承tabbar。

結(jié)語

以上就是關(guān)于微信小程序tabbar的簡單介紹和使用方法。通過學(xué)習(xí)本文，相信大家已經(jīng)初步掌握了tabbar的相關(guān)知識，同時我們也希望更多的開發(fā)者能夠加入我們的行列，共同致力于小程序開發(fā)的壯大！

肥貓科技是一家專注于小程序行業(yè)的公司，我們擁有豐富的小程序開發(fā)經(jīng)驗和優(yōu)秀的開發(fā)團隊。如果您有關(guān)于小程序方面的問題或者合作意向，歡迎聯(lián)系我們。

本文標(biāo)簽：

上一篇：微信開發(fā)者工具怎么用

下一篇：什么是零購小程序

猜你喜歡

客戶案例

Customer case

螢火蟲

深圳螢火蟲科技控股有限公司（簡稱螢火蟲科技），成立于2017年，注冊…
View more
盛睿游智能科技

武漢市盛睿游智能科技有限責(zé)任公司是一家致力于將前沿的人工智能應(yīng)…
View more
大方高爾夫?qū)W院

大方高爾夫?qū)W院，武漢高爾夫教育的第一團隊！
View more
KAG培訓(xùn)網(wǎng)

KAG培訓(xùn)網(wǎng)，是一支以為學(xué)員提供優(yōu)質(zhì)培訓(xùn)和家教服務(wù)為理念的創(chuàng)業(yè)團隊…
View more
isun3D

中科三維成型技術(shù)（深圳）有限公司（英文名： isun3d Tech (ShenZhen) Co.,…
View more
ESAA

ESAA于2018年10月在美國加州成立，主要從事對外教育交流業(yè)務(wù)，包括為中…
View more