The body of the

Unique introduction

The process for introducing Tabbar tags in Vant appellate does not actually start from Vant appellate documents, but from the customized Tabbar page in the appellate documents of wechat.

Wechat applet document section

We first follow the use process in the customized tabBar page in the wechat applets document:

  1. Configuration information

    We can copy the instance given in the applet document directly into our own project app.json file, and then change the page path to the corresponding page path of our project

      "tabBar": {
        "custom": true."color": "# 000000"."selectedColor": "# 000000"."backgroundColor": "# 000000"."list": [{
          "pagePath": "page/component/index"."text": "Component"
        }, {
          "pagePath": "page/API/index"."text": "Interface"}},"usingComponents": {}}Copy the code
  2. Add the tabBar code file

    Add the entry file to the code root directory:

    Copy the code

    In fact, this paragraph corresponds to the operation:

    1. Create a folder named custom-tab-bar in the miniProgram path

    2. Add the files mentioned above to this folder

  3. Writing tabBar code (we didn’t get back to Vant syndrome documentation until this point)

Vant WeappDocument parts

The following operations are performed in a file in the custom-tab-bar folder

  1. First we introduce the Tabbar component in index.json

    "usingComponents": {
      "van-tabbar": "@vant/weapp/tabbar/index"."van-tabbar-item": "@vant/weapp/tabbar-item/index"
    Copy the code
  2. This component is then used in index. WXML

      <van-tabbar-item icon="home-o">Label 1</van-tabbar-item>
      <van-tabbar-item icon="search">Label 2</van-tabbar-item>
    Copy the code

From there, you should have Tabbar tabs on the page


implementationTabbarThe TAB page is displayed

It’s not enough just to have the Tabbar appear successfully. We want to be able to click on the Tabbar to jump to a page, but there are a series of “holes” in the process…

-Vant Appellate P-3 (Appellate Appellate)