Applet support for custom Tabbars started in the base library 2.5.0.

The detailed steps for customizing a tabBar are as follows:

1. Configure app.json

  • An important step in the custom tabBar is to set “custom”: true in the tabBar and complete other tabbar-related configurations. The list must be consistent with the list in the custom tabBar. Otherwise, an error will be reported

  • Declare the usingComponents item in the JSON of all TAB pages, or enable it globally in app.json

{ "tabBar": { "custom": true, "color": "#ccc", "selectedColor": "#ff6861", "borderStyle": "black", "backgroundColor": "#fff", "list": [ { "pagePath": "pages/index/index", "iconPath": "images/tabbar/home.png", "text": {"pagePath": "pages/catalog/catalog", "iconPath": "images/tabbar/home-o.png"}, "pagePath": "pages/catalog/catalog", "iconPath": "images/tabbar/home-o.png"}, "pagePath": "pages/catalog/catalog", "iconPath": "Images /tabbar/cate. PNG ", "text":" category ", "selectedIconPath": "images/tabbar/cate- O.png "}, {"pagePath": "Pages /cart/cart", "iconPath": "images/tabbar/cart. PNG ", "text":" cart", "selectedIconPath": "images/tabbar/cart-a.png" }, { "pagePath": "pages/ucenter/index/index", "iconPath": "images/tabbar/user.png", "text": "SelectedIconPath ": "images/tabbar/user-o.png"}]}, "usingComponents": {}}Copy the code

2. Place tabBar icon in project file

As with the tabBar standard, icon images cannot be placed on the server

Create a custom tabBar component custom tab-bar in the root directory

  1. Make sure it’s in the root directory, otherwise you’ll get a selection disorder.

  2. Component file name. Set this parameter to index

Write tabBar components

index.wxml

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>
Copy the code

index.js

Component({ data: { selected: 0, color: "#ccc", selectedColor: "#ff6861", list: [{ pagePath: "/pages/index/index", iconPath: "/images/tabbar/home.png", text: "home ", selectedIconPath: "/images/tabbar/home-a.png" }, { pagePath: "/pages/catalog/catalog", iconPath: "/images/tabbar/cate.png", text: "Category ", selectedIconPath: "/images/tabbar/cate- O.png"}, {pagePath: "/pages/cart/cart", iconPath: "/images/tabbar/cart. PNG ", text: "cart ", selectedIconPath: "/images/tabbar/cart-a.png"}, {pagePath: "/ pages/ucenter/index/index", iconPath: "/ images/tabbar/user. The PNG", the text: "my", selectedIconPath: "/images/tabbar/user-o.png" }] }, attached() { }, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({url}) this.setData({ selected:  data.index }) } } })Copy the code

index.json

{
  "component": true
}
Copy the code

5. Matters needing attention

  1. To control whether the Tabbar is displayed on this interface, you need to add the following code to the page where the Tabbar is displayed:
onShow: If (typeof this.gettabbar === 'function' && this.gettabbar ()) {this.gettabbar ().setdata ({typeof this.gettabbar === 'function' && this.gettabbar ()) Select: 0; select: 0; select: 0;Copy the code
  1. The tabbar icon flickers, which can be resolved by commenting out the code in this.setData of the Tabbar custom component.

Six, summarized

The above is the micro channel small program custom tabBar use method, and need to pay attention to several points.

There are more potholes, I hope you finish and share in the comments