【微信小程序-原生开发】实用教程03-自定义底部导航（含自定义tabBar导航高亮需点击两次的解决方案）

"custom": true,

export default [
  {
    icon: 'home',
    text: '首页',
    url: 'pages/index/index',
  },
  {
    icon: 'usergroup',
    text: '家庭成员',
    url: 'pages/member/index',
  },
  {
    icon: 'tips',
    text: '圆梦宝典',
    url: 'pages/bible/index',
  },
  {
    icon: 'user',
    text: '我的世界',
    url: 'pages/me/index',
  },
];

import TabMenu from './data';
Component({
  data: {
    active: 0,
    list: TabMenu,
  },

  methods: {
    onChange(event) {
      this.setData({ active: event.detail.value });
      wx.switchTab({
        url: this.data.list[event.detail.value].url.startsWith('/')
          ? this.data.list[event.detail.value].url
          : `/${this.data.list[event.detail.value].url}`,
      });
    },

    init() {
      const page = getCurrentPages().pop();
      const route = page ? page.route.split('?')[0] : '';
      const active = this.data.list.findIndex(
        (item) =>
          (item.url.startsWith('/') ? item.url.substr(1) : item.url) ===
          `${route}`,
      );
      this.setData({ active });
    },
  },
});

{
  "component": true,
  "usingComponents": {
    "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
    "t-tab-bar-item": "tdesign-miniprogram/tab-bar/tab-bar-item",
    "t-icon": "tdesign-miniprogram/icon/icon"
  }
}

<t-tab-bar
 value="{{active}}"
 bindchange="onChange"
 split="{{false}}"
>
  <t-tab-bar-item
   wx:for="{{list}}"
   wx:for-item="item"
   wx:for-index="index"
   wx:key="index"
  >
    <view class="custom-tab-bar-wrapper">
      <t-icon name="{{item.icon}}" size="48rpx" />
      <view class="text">{{ item.text }}</view>
    </view>
  </t-tab-bar-item>
</t-tab-bar>

.custom-tab-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-tab-bar-wrapper .text {
  font-size: 20rpx;
}

  onShow() {
    this.getTabBar().init();
  },