微信小程序自定义tabbar

(1): 在app.json配置如下，主要是custon配置和usingComponents

"tabBar": {
    "custom": true,
    "color": "#999999",
    "selectedColor": "#000000",
    "borderStyle": "black",
    "backgroundColor": "#FFFFFF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tabbar/tab-home.png",
        "selectedIconPath": "static/tabbar/tab-home-sel.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/hot/hot",
        "iconPath": "static/tabbar/tab-hot.png",
        "selectedIconPath": "static/tabbar/tab-hot-sel.png",
        "text": "今日爆款"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "static/tabbar/tab-cart.png",
        "selectedIconPath": "static/tabbar/tab-cart-sel.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "static/tabbar/tab-mine.png",
        "selectedIconPath": "static/tabbar/tab-mine-sel.png",
        "text": "我的"
      }
    ]
  },
  "usingComponents": {}

（2): 新建custom-tab-bar组件(根目录下)

• index.js

Component({
  data: {
    'selected': 0,
    'color': "#ccc",
    "selectedColor": "#000000",
    "list": [
      {
        "pagePath": "/pages/index/index",
        "iconPath": "/static/tabbar/tab-home.png",
        "selectedIconPath": "/static/tabbar/tab-home-sel.png",
        "text": "首页"
      },  
      {
        "pagePath": "/pages/hot/hot",
        "iconPath": "/static/tabbar/tab-hot.png",
        "selectedIconPath": "/static/tabbar/tab-hot-sel.png",
        "text": "今日爆款"
      },
      {
        "pagePath": "/pages/cart/cart",
        "iconPath": "/static/tabbar/tab-cart.png",
        "selectedIconPath": "/static/tabbar/tab-cart-sel.png",
        "text": "购物车"
      },
      {
        "pagePath": "/pages/mine/mine",
        "iconPath": "/static/tabbar/tab-mine.png",
        "selectedIconPath": "/static/tabbar/tab-mine-sel.png",
        "text": "我的"
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      // this.setData({
      //   selected: data.index
      // })
    }
  }
})

• index.json

{
  "component": true
}

• index.wxml

<cover-view class="tab-bar">
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image class='tab-bar-img' src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view class="tab-bar-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

• index.wxss

/* custom-tab-bar/index.wxss */

.tab-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  justify-content: space-around;
  background-color: #eef0f4;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-bar-img {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
}
.tab-bar-text{
  font-size: 10px;
}
.selectedColor {
  color: #f60;
}

(3) 在每个tabbar中的onShow中配置

  onShow() {
    // 页面显示
    if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0, // 对应当前页面在tabbar--list中的索引 0 1 2 3(代表四个tabbar)
          show: true
        })
      }
  },

显示如下，但是有个问题就是页面第一次切换，会闪动一下，也不知道怎么解决，希望大佬给个提示

在这里插入图片描述