微信小程序引入vant tabbar不显示问题

1. 项目目录结构
   

2. app.json

• tabbar开启custom:true自定义tabbar
• 在app.json中引入vant-tabbar（这里是全局引入，也可以在需要的page中的json文件中单独引入）

{
    "pages": [
        "pages/tab1/search",
        "pages/tab2/about",
        "pages/index/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
"tabBar": {
  "custom": true,
  "color": "#1B1B1B",
  "selectedColor": "#00c56b",
  "borderStyle": "black",
  "backgroundColor": "#fafbfe",
  "list": [ 
    {
      "pagePath": "pages/tab1/search",
      "text": "搜索"
    },
    {
      "pagePath": "pages/tab2/about",
      "text": "我的"
    }
  ]
},
"usingComponents": { 
  "van-tabbar": "/miniprogram_npm/vant-weapp/tabbar/index",
  "van-tabbar-item": "/miniprogram_npm/vant-weapp/tabbar-item/index"
},
  "sitemapLocation": "sitemap.json"
}

3. 在项目根目录下新建custom-tab-bar（文件夹名称必须为这个），并新建index的component
   
4. custom-tab-bar/index.js（list由自己定义）

Component({
  data: { 
    selected: 0,
    list: [
      {
        pagePath: "/pages/tab1/search",
        text: "运动咨询",
        icon: "smile-o",

      },
      {
        pagePath: "/pages/tab2/about",
        text: "个人中心",
        icon:"user-o",
      },

    ]
  },
  methods: {
    onChange(e) {
       console.log(e,'e')
       this.setData({ active: e.detail });
       wx.switchTab({
         url: this.data.list[e.detail].pagePath
       });
    },
    init() {
        const page = getCurrentPages().pop();
        this.setData({
       　  active: this.data.list.findIndex(item => item.pagePath === `/${page.route}`)
        });
       }
    }
})

5. custom-tab-bar/index.wxml

<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#07c160">
  <van-tabbar-item wx:for="{{ list }}" icon="{{ item.icon }}" wx:key="index" >
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

6. 在每个切换页的js文件中添加onshow方法
   

methods: {
     /**
   * 生命周期函数--监听页面显示
   */
  onShow:function() {
    this.getTabBar().init();
  },
  }

7. tabbar不显示问题说明
   app.json中pages中的小程序默认首页不能放在第一个，否则无法显示tabbar