配置信息

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

{
  "tabBar": {
    "custom": true,  // 配置为true
     // list要完整声明，但不会生效。
     // 目的：1.保证低版本兼容 2.为了区分哪些是tabBar页
    "list": [
        {
          "pagePath": "page/component/index",
          "text": "组件"
        }, 
        {
          "pagePath": "page/API/index",
          "text": "接口"
        }
    ]
  },
  "usingComponents": {}
}

添加tabBar代码文件

在项目根目录下创建入口文件夹custom-tab-bar

在文件夹下创建index组件

tabBar位置会被该组件代替

编写tabBar

vant官方文档：vant-contrib.gitee.io/vant-weapp/…

custom-tab-bar/index.wxml
<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
</van-tabbar>

active 通过store管理，因每次跳转，页面会重置，都会初始化为0

// custom-tab-bar/index.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    active: 0, // 通过store管理，因每次跳转，页面会重置，都会初始化为0
    icon: {
      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
      active: 'https://img.yzcdn.cn/vant/user-active.png',
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      this.setData({ active: event.detail });
      // 跳转 路径必须`/`开头
      wx.switchTab({
       url:this.data.list[event.detai].pagePath
      })
    },
  }
})

// custom-tab-bar/index.json
{
  "component": true,
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }
}

组件内vant样式修改

组件内样式修改不生效问题

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

修改变量不生效：vant-contrib.gitee.io/vant-weapp/…

在自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared'选项

Component({ 
    options: { 
        styleIsolation: 'shared',
    }, 
});

组件通信：扩展能力 / 框架扩展 (qq.com)

// 设置数组中，指定对象的指定属性值
this.setData({"list[1].info",3})

初识小程序-自定义tabBar

配置信息

添加tabBar代码文件

编写tabBar

组件内vant样式修改