Wechat applet custom tabbar

effect ：

 

 

Refer to the official website , Customize tabBar

Customize tabBar | Wechat open documents

1、 Configuration information

Need to be in app.json Set a property in custom, by true , On behalf of the global open custom tab

Be careful ： When we set up custom After the attributes , that tabBar Below list Can the array be deleted ？

answer ： Can not be , It has been clearly stated in the document that it cannot be deleted , You need to keep complete configuration items and customization is not applicable in the lower version tabBar, Therefore, compatibility is required 、

2、 Add code file .

The directory structure is fixed , You must create a folder in the project root directory ： custom-tab-bar, And the corresponding documents .

In the first step custom Set to true, The applet can automatically read the index Components , Think of this component as tab renders .

Click on the plus sign , Create a new... In the root directory custom-tab-bar Folder

 

Then right-click the folder , Click New components, Input index, enter , Four files will be created automatically

 

 

At this point, we can see the bottom of the applet , It means that the creation is successful . Because he automatically recognized tabBar page .

 

 3、 Write code in this directory .

 

  After the establishment, we introduce vant In the component library tab Components ：

First, in the js Under the document , introduce

 "usingComponents": {
    "van-tabbar": "/miniprogram_npm/@vant/weapp/tabbar/index",
    "van-tabbar-item": "/miniprogram_npm/@vant/weapp/tabbar-item/index"
  }

  And then again wxml writes vant Provided by the official website tabbar TAB bar

Vant Weapp - Tabbar TAB bar Light weight 、 Reliable small program UI Component library https://vant-contrib.gitee.io/vant-weapp/#/tabbar

<van-tabbar active="{
   { active }}" bind:change="onChange">
  <van-tabbar-item icon="wap-home"> home page </van-tabbar-item>
  <van-tabbar-item icon="shopping-cart" info="5"> The shopping cart </van-tabbar-item>
  <van-tabbar-item icon="manager" dot> my </van-tabbar-item>
</van-tabbar>

stay js Write the variables provided on the official website under the file and click the switch button change event .

  effect ：

Be careful ： Icons can be customized , See for yourself vant Just document , If you don't need it, just use it vant Icons provided , By modifying the icon Name to implement .

  Be careful :

We want to modify it directly tabbar Style of component , You need to find the class name of the corresponding element , For example, I want to adjust the distance between the text and the icon ：（ tip ： Hold down shift key Hold down the left mouse button , Pulling the simulator up and down can achieve the effect of zooming in and out .）

We can see , By default, he added a... To the icon margin value  

 

 

  Mainly the following code ：
What does he mean ？ intend margin-bottom Value get yes --tabbar-item-margin-bottom The value of this variable or 5px, If there are variables --tabbar-item-margin-bottom Just take the value of the variable , Otherwise the default 5px value .

margin-bottom: var(--tabbar-item-margin-bottom,5px);

So let's modify this variable ：

Define through the parent class stay index.wxss In the definition of ：

.van-tabbar-item{
  --tabbar-item-margin-bottom:0
}

  After preservation , It didn't work ：

 

  After reading the document , It is found that this attribute needs to be enabled , Otherwise, modify in the custom component vant The default style of will not take effect

So we index.js Set in

options:{
    styleIsolation:'shared'
  },

  You can see that the distance is not so big ：

  Let's simplify the code . Write this in a loop tabbar.

stay index.js Define a list

    list:[
      {
        path:"pages/home/home",
        icon:"wap-home",
        text:" home page "
      },
      {
        path:"pages/shopcart/shopcart",
        icon:"shopping-cart",
        text:" The shopping cart ",
        info:10,
      },
      {
        path:"pages/mine/mine",
        icon:"manager",
        text:" my "
      }
    ]

 wxml writes ： Because there is no guarantee that everyone needs a logo , therefore , We only define the shopping cart info attribute , Through three eye operation , To judge whether there is info, Show logo when it exists , Otherwise it doesn't show .

<van-tabbar active="{
   { active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{
   {list}}" wx:key="index" info="{
   {item.info?item.info:''}}" icon="{
   {item.icon}}">{
   {item.text}}</van-tabbar-item>
</van-tabbar>

  This is the end of the article , Next article , Talk about how to make the digital logo on the shopping cart , Dynamic plus change .