一、配置信息

在app.json文件中进行配置, 在现有 tabBar 配置基础上新增customize字段。

 "tabBar": {
    "customize": true,
    "items": [
      {
        "pagePath": "pages/index1/index1",
        "name": "这是tabBar1"
      },
      {
        "pagePath": "pages/index2/index2",
        "name": "这是tabBar2"
      },
      {
        "pagePath": "pages/index3/index3",
        "name": "这是tabBar3"
      },
      {
        "pagePath": "pages/index4/index4",
        "name": "这是tabBar4"
      }
    ]
  }

二、 添加 tabBar 文件

结构目录如下：

├── customize-tab-bar       # 自定义 tabBar 文件
│   ├── index.less
│   ├── index.axml
│   ├── index.js
│   └── index.json
├── components
│   └── ...
├── pages
│   └── ...
├── app.less
├── app.js
├── app.json
├── mini.project.json
└── ...

三、编写 tabBar 代码

(一)、customize-tab-bar/index.axml

<tab-bar tabs="{{tabs}}" activeKey="{{selected}}" onChange="handleChange" class="tab-bar" activeColor="#285DFF" />

注意：这里使用的是antd-mini的TabBar组件，需要在app.json中引入该组件，可根据需求自行修改

(二)、customize-tab-bar/index.js

Component({
  mixins: [],
  data: {
    selected: 0,
    tabs: [
      {
        icon: "FireOutline",
        activeIcon: "FireFill",
        text: "这是tabBar1",
        path: "/pages/index1/index1"
      },
      {
        icon: "StarOutline",
        activeIcon: "StarFill",
        text: "这是tabBar2",
        path: "/pages/index2/index2"
      },
      {
        icon: "EditSOutline",
        activeIcon: "EditSFill",
        text: "这是tabBar3",
        path: "/pages/index3/index3"
      },
      {
        icon: "UserOutline",
        activeIcon: "HeartFill",
        text: "这是tabBar4",
        path: "/pages/index4/index4"
      }
    ]
  },
  props: {},
  didMount() {},
  didUpdate() {},
  didUnmount() {},
  methods: {
    handleChange(_: object, index: number) {
      this.setData({
        selected: index
      });
      my.switchTab({
        url: this.data.tabs[index].path
      });
    }
  }
});

(三)、customize-tab-bar/index.json

{
  "component": true
}

(四)、customize-tab-bar/index.less

.tab-bar {
  padding-top: 0.2rem;
  background-color: #fff;
}

四、编写tabbar对应的页面代码

(一)、 pages/index1/index1.js

Page({
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0,
      });
    }
  },
})

(二)、 pages/index2/index2.js

Page({
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected:1,
      });
    }
  },
})

......