Wechat applet custom tabbar (session customer service) vant

The effect to be achieved :

In the process of writing the project , May meet ui Design conversation customer service on tabbar On the situation , But the session message must go through button Trigger , However, the default of goose applet tabbar Highest level , There is no way to add button event , At this time , We need to implement a custom tabbar, I use it Vant ui Component library , Others will do , The main principle is tabbar Put a button on it , Block the original tab Just do it !
Vant Applet website ( It must be a small program version , Before the introduction of vue Version of , It can't be realized , After troubleshooting for a long time )
Applet customization tabbar Official website tutorial

First step :

//app.json json The file cannot write comments , But to prompt important steps , I wrote ha ha 
"tabBar": {
    
    "custom": true,  // Turn on custom tabbar
    "color": "#1B1B1B",
    "selectedColor": "#00c56b",
    "borderStyle": "black",
    "backgroundColor": "#fafbfe",
    "list": [ 
 //tabbar The path of , Although it is customized , You still have to write all the paths ,
/* * a key :  You may find that the customer service tabbar Be missing , This is because our customer service also needs to bind a page ( Custom jump needs to be bound with jump path ),  If it is written here, it will appear that you clicked customer service , When you return, the bound blank page will be displayed ,  This is definitely not what we want , So it doesn't say , Will return to the previous page path , There will be no blank pages */
      {
    
        "pagePath": "pages/groupChat/groupChat",
        "text": " Group chat "
      },
      
      {
    
        "pagePath": "pages/newMessage/newMessage",
        "text": " information "
      },
      {
    
        "pagePath": "pages/newChat/newChat",
        "text": " Chat "
      },
      {
    
        "pagePath": "pages/mine/mine",
        "text": " my "
      }
    ]
  },
  "usingComponents": {
     // These two were introduced by us vant tabbar Components , Also on the page json quote , Look at your own code habits , The global availability introduced here 
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
  }

The second step : Add... To the code root directory tabBar Code entry file :
The third step :

//custorm-tab-bar/index.wxml page 
<van-tabbar active="{
     { active }}" bind:change="onChange" active-color="#07c160" inactive-color="#1b1b1b">
  <van-tabbar-item >
    <image slot="icon" src="/images/tabbar/groups.png" mode="aspectFit" />
    <image slot="icon-active" src="/images/tabbar/groups_on.png" mode="aspectFit" />
     Group chat 
  </van-tabbar-item>
  <van-tabbar-item>
    <image slot="icon" src="/images/tabbar/server.png" mode="aspectFit" />
      <image slot="icon-active" src="/images/tabbar/serverActive.png" mode="aspectFit" />
<!--  Call up the conversation customer service button-->
      <button class="serverButton" hover-class="btn-hover" openType="contact"> </button>
      <text class="hintText"> Customer service </text>
  </van-tabbar-item>  
  <van-tabbar-item >
<!-- The displayed... Is not selected icon-->
    <image slot="icon" src="/images/tabbar/msg.png" mode="aspectFit" />
<!-- Check the displayed icon-->
    <image slot="icon-active" src="/images/tabbar/msgActive.png" mode="aspectFit" />
     information 
  </van-tabbar-item>
  <van-tabbar-item >
    <image slot="icon" src="/images/tabbar/groupChat.png" mode="aspectFit" />
    <image slot="icon-active" src="/images/tabbar/groupChatActive.png" mode="aspectFit" />
     Chat 
  </van-tabbar-item>

  <van-tabbar-item >
    <image slot="icon" src="/images/tabbar/my.png" mode="aspectFit" />
    <image slot="icon-active" src="/images/tabbar/myActive.png" mode="aspectFit" />
     my 
  </van-tabbar-item>
</van-tabbar>

//custorm-tab-bar/index.js page 
Component({
    
  data: {
     
    active:0, // By default tab
    list: [ 
 /*tabbar route , Actually van-tabbar-item The cyclic data of can be written here ,  For example, the picture before clicking , And the image path after clicking , And then in wxml page wx:for Circulation is enough  */
      {
     pagePath: "/pages/groupChat/groupChat", },
      {
    pagePath: "/pages/serverPage/serverPage", },
      {
    pagePath: "/pages/newMessage/newMessage",},
      {
     pagePath: "/pages/newChat/newChat", },
      {
     pagePath: "/pages/mine/mine", }
    ]
  },
  methods: {
    
// Click on tab
    onChange(e) {
    
      // console.log(e,'e',this.data.active)
       this.setData({
     active: e.detail });  // Switch tab
      // console.log(this.data.active,"active",e.detail)
       wx.switchTab({
      // Switch pages 
         url: this.data.list[e.detail].pagePath
       });
    },
    init() {
    
        const page = getCurrentPages().pop();
        this.setData({
    
       　  active: this.data.list.findIndex(item => item.pagePath === `/${
      page.route}`)
        });
       }
    }
})

//custorm-tab-bar/index.wxss page 
image{
    
  width: 30px;
   height: 18px;
}
button::after {
    
  border: none;  // Remove the default button Border 
  }
button {
    
  background: #ffffff;
  font-size: 24rpx;
  line-height: 24rpx;
}
  .button-hover{
    
    background: #ffffff;  // Remove the default button Background color of 
  }
  .serverButton {
     
 // a key :  Our customer service btn It is fixed and positioned on tabbar Upper , We need to block it completely tab Click event , It needs to be positioned according to its position 
// The key css  Note yes * Number 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;  // *  Fixed position 
    width: 20%;  //*  Look at you tab There are several , Calculation : 100% / tab Number 
    bottom: 0;  // *
    height: 100rpx;  //*tab Height 
    opacity: 0;  //*  If the button is transparent, it will not be blocked icon
    left: 20%;  // *  Offset ,  Calculation : width * index
  }
  .activeButton{
    
    color: #07c160; /*  Because the default tab Blocked click events , We need to change the text color when we focus  } .serverText { font-size: 12px; line-height: 12px; } 

summary : Important steps are annotated , As long as you import components correctly , The code should be copied and available , The image path needs to be changed to your local image path , Do not understand the parameters in the component , Official documents also introduce