Use the WeChat applet custom-tab-bar in uniapp

It is actually very simple to change the tabBar in the applet project to use a custom tabbar today , just follow the steps in the applet development document

1. Configuration information

The tabBar item in app.json specifies the custom field, and other tabBar-related configurations are also complete.
The usingComponents item needs to be declared in the json of all tab pages, and it can also be enabled globally in app.json.

Example:

{
    
    
  "tabBar": {
    
    
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
    
    
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
    
    
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {
    
    }
}

2. Add tabBar code file

Add the entry file in the root directory of the code:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3. Write the tabBar code

It can be written in the form of a custom component, which completely takes over the rendering of the tabBar. In addition, the custom component adds a getTabBar interface, which can obtain the custom tabBar component instance under the current page.
The document is written like this, but according to the official code snippet, it seems that it is not feasible on uniapp. The
insert image description here
current effect is that the tab is switched, and the page is also switched, but the active tab is not switched, because we have not called getTabBar
and then Think of introducing the custom-tab-bar component in each tabbar page, and then calling the component instance to change the selected value when the page is onShow can achieve the goal.

Introduce native components in pages.json

// pages.json
{
    
    
	"pages":[
		{
    
    
			"path": "pages/index/index",
			"style": {
    
    
				"navigationBarTitleText": "工作台",
				"enablePullDownRefresh": true,
				"usingComponents": {
    
    
					"custom-tab-bar": "/custom-tab-bar/index"
				}
			}
		},
		...
	]
}

call in the page

// index/index.vue
<template>
...
    <custom-tab-bar v-show="0" ref="customTabBar" />
...
</template>
<script>
...
onShow() {
    
    
this.$nextTick(() => {
    
    
      this.$refs.customTabBar.getTabBar().setData({
    
    
        selected: 2
      })
    })
}
...
</script>

Now tab switching and activation status can be synchronized

renew

Later, I saw an article saying that the getTabBar() method can be called under this.$mp.page. In this way, there is no need to repeatedly introduce components like the above, which is more elegant.

onShow() {
    
    
  this.$mp.page.getTabBar().setData({
    
    
    selected: 1
  })
}

4. Step on the pit

Perfect, it was implemented so simply and smoothly, and then when I previewed on the mobile phone, I
found that there were two tabbars, which are right, the custom ones and the original ones stacked on top of each other.
insert image description here
How could this happen
? "custom": true is obviously set.

And look at the document which says that the interface related to the tabBar style, such as wx.setTabBarItem, etc. will be invalid .
insert image description here

5. Solve

Later, I wondered if showTabBar was called. I searched the code and found it, but why it still works? Oh, the document didn’t say that after setting "custom": true, the interface of showTabBar will be invalid. After removing the showTabBar in the code, it will be normal
. a little knowledge every day
insert image description here