Custom tabBar

case effect
Implementation steps

case effect

By making the page number increase, the number above the tabBar also increases.

insert image description here

In this case, the main knowledge points used are as follows:

custom components
Vant component library
MobX data sharing
Component Style Isolation
Component Data Listener
Component behaviors
Vant Style Overrides

Implementation steps

Custom tabBar is divided into 3 major steps, namely:

configuration information
Add tabBar code file
Write tabBar code

For detailed steps, you can refer to the official documentation given by the Mini Program:
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

configuration information

tabBarThe item in app.json specifies customthe 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.

insert image description here

Add tabBar code file

Add the entry file in the root directory of the code

insert image description here

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

After adding, the original tabBar will show the structure under the directory of our custom-tab-bar

Write 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 has a new getTabBarinterface , which can obtain the custom tabBar component instance under the current page.

Vant Weapp ------tabBar tab bar ⭐Look at the documentation! ! ! !
https://youzan.github.io/vant-weapp/#/tabbar

insert image description here

Loop rendering tabBar

Copy the list in the tabBar written before to the data in tabBar.js

Cycle through the item items of each tabBar

<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{
       
       { active }}" bind:change="onChange">
  <van-tabbar-item info="3" wx:for="{
       
       {list}}" wx:key="index">
    <image slot="icon" src="{
       
       {item.iconPath}}" mode="aspectFit" style="width: 25px; height: 25px;" />
    <image slot="icon-active" src="{
       
       {item.selectedIconPath}}" mode="aspectFit" style="width: 25px; height: 25px;" />
    {
     
     {item.text}}
  </van-tabbar-item>
</van-tabbar>

Render the digital logo on the tabBar

The current digital logo is beyond the upper line, because his icon has a lower margin value, we need to reset it to 0

We modify the style of the vant component and enable the style coverage of the tabBar page (using CSS variables)

	/* custom-tab-bar/index.wxss */
	.van-tabbar-item{
    
    
	  --tabbar-item-margin-bottom:0
	}

insert image description here

How to do a digital logo for an icon on demand ?

Now only the message page needs an icon, we can add it to the object of the message in the js fileinfo:xxx

Then when rendering, judge whether there is info, if there is, it will be rendered, if not, it will be an empty string

insert image description here

How to map the data in the store to the tabBar for use

Use MobX to bind the members in the store to the component
insert image description here

Monitor the change of sum through the data listener. If there is a change in sum, let the info in the list change

  observers: {
    
    
    // 监听sum 的变化
    "sum": function (val) {
    
    
      // 修改info 数据
      this.setData({
    
    
        // 如果info 为非正数，就为空字符串
        'list[1].info': val > 0 ? val : ''
      })
    }
  },

insert image description here

Realize the switching effect of the tabBar page

insert image description here
When we click each tabBar item, the onChange event will be triggered, and the event.detailindex value of the item you clicked will be obtained, and then the url address will be dynamically obtained

  methods: {
    
    
    onChange(event) {
    
    
      // event.detail 的值为当前选中项的索引
      this.setData({
    
     active: event.detail });
      wx.switchTab({
    
    
        url: this.data.list[event.detail].pagePath,
      })
    },
  }

When switching pages, there is a problem with the active icon item. After you compile, it will flicker when you click on other tabBar page icons. At this time, we put the active in the data into the store. When you click on the icon, it will modify the active value

Write the active index value of the tabBar into the store, and write the method of switching the index value
Introduce active attributes and modified methods in tabBar components
Assign the active value, when you click the tabBar, the onChange event will be triggered
When you want to switch, modify the value of active