日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

微信小程序自定義tabBar

微信小程序的tabBar是小程序底部的導(dǎo)航欄，可以放置最多5個tab，每個tab可以跳轉(zhuǎn)到對應(yīng)的頁面，默認情況下，tabBar只有4個固定的tab：首頁、分類、購物車和個人中心，有時候我們需要自定義tabBar，以滿足特定的需求，本文將介紹如何在微信小程序中自定義tabBar。

自定義tabBar的基本思路

要自定義tabBar，我們需要完成以下步驟：

1、在app.json中配置tabBar屬性，設(shè)置自定義tabBar的相關(guān)參數(shù)。

2、在app.wxss中編寫自定義tabBar的樣式。

3、在頁面的js文件中，監(jiān)聽tabBar的相關(guān)事件，如點擊、切換等。

自定義tabBar的具體實現(xiàn)

1、配置app.json

在app.json中，我們需要配置tabBar的屬性，具體如下：

{
  "pages": [
    "pages/index/index",
    "pages/category/category",
    "pages/cart/cart",
    "pages/user/user",
    "pages/customTabBar/customTabBar"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#000",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/homeactive.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分類",
        "iconPath": "images/category.png",
        "selectedIconPath": "images/categoryactive.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "購物車",
        "iconPath": "images/cart.png",
        "selectedIconPath": "images/cartactive.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "個人中心",
        "iconPath": "images/user.png",
        "selectedIconPath": "images/useractive.png"
      }
    ]
  }
}

在上述代碼中，我們設(shè)置了tabBar的color、selectedColor、backgroundColor、borderStyle等屬性，以及一個list數(shù)組，用于存放自定義的tab，每個tab包含pagePath、text、iconPath和selectedIconPath四個屬性，pagePath表示頁面路徑，text表示tab的文字，iconPath表示未選中時的圖標(biāo)，selectedIconPath表示選中時的圖標(biāo)，注意，iconPath和selectedIconPath需要使用相對路徑。

2、編寫app.wxss樣式

在app.wxss中，我們可以編寫自定義tabBar的樣式。

/* tabBar */
.customtabbar {
  display: flex;
  justifycontent: spacearound;
  alignitems: center;
  height: 50px;
  backgroundcolor: #fff;
  bordertop: 1px solid #ccc;
}
.customtabbar .item {
  display: flex;
  flexdirection: column;
  alignitems: center;
}
.customtabbar .item span {
  fontsize: 12px;
  color: #999;
}
.customtabbar .item i {
  width: 24px;
  height: 24px;
}
.customtabbar .item i.home { backgroundimage: url(../../images/home.png); }
.customtabbar .item i.homeactive { backgroundimage: url(../../images/homeactive.png); }
.customtabbar .item i.category { backgroundimage: url(../../images/category.png); }
.customtabbar .item i.categoryactive { backgroundimage: url(../../images/categoryactive.png); }
.customtabbar .item i.cart { backgroundimage: url(../../images/cart.png); }
.customtabbar .item i.cartactive { backgroundimage: url(../../images/cartactive.png); }
.customtabbar .item i.user { backgroundimage: url(../../images/user.png); }
.customtabbar .item i.useractive { backgroundimage: url(../../images/useractive.png); }

在上述代碼中，我們?yōu)樽远x的tabBar添加了一個名為customtabbar的class，并為其設(shè)置了樣式，我們還為每個tab的圖標(biāo)設(shè)置了背景圖片，注意，這里使用了相對路徑，如果需要使用絕對路徑，可以將url()中的路徑替換為實際的圖片路徑。

網(wǎng)站欄目：微信小程序自定義tabbar高度
文章轉(zhuǎn)載：http://www.dlmjj.cn/article/djocpie.html