微信自定义TabBar

1、问题：看了官网介绍自定义TabBar的介绍，感觉比较笼统，就详细记录一下

2、实操

在微信中要自定义TabBar的话，app.json那里的声明还是要写的，虽然不会渲染，custom要填true

{
...
  "tabBar": {
    "custom": true,
    "color": "#666666",
    "selectedColor": "#FF5F15",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类"
      },
      {
        "pagePath": "pages/zhibo/zhibo",
        "text": "走起"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  },
...
}

在根目录创建custom-tab-bar文件夹，在里面创建对应文件

 

 

 然后每个文件的内容如下

//index.json
{
  "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"
  }
}

//index.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    active:0,
    list:[
      {
        text:'首页',
        icon:"home",
        url:"pages/home/home"
      },
      {
        text:'分类',
        icon:"menu",
        url:"pages/category/category"
      },
      {
        text:'走起',
        icon:"tv",
        url:"pages/zhibo/zhibo"
      },
      {
        text:'购物车',
        icon:"trolley",
        url:"pages/cart/cart"
      },
      {
        text:'个人中心',
        icon:"user",
        url:"pages/my/my"
      },
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event:any):void {
      console.log(event.detail.value)
      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():void {
      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 });
    },
  }
})

//index.wxml
<t-tab-bar
 value="{{active}}"
 bindchange="onChange"
 split="{{false}}"
 color="{{['red', '#bbb' ]}}"
>
    <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 prefix="icon" name="{{item.icon}}" size="48rpx" />
            <view class="text">{{ item.text }}</view>
        </view>
    </t-tab-bar-item>
</t-tab-bar>


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

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

到了这一步可以看到自定义TabBar了，但是会发现点击可以跳转，但是图标会错位，原因是每次跳转自定义组件都会重新加载，所以需要在TabBar页面调用init重新设置active

//tabBar页面
{
...
  onShow() {
    this.getTabBar().init();
  },
...
}