custom-tab-bar.js

Component({
  // 定义组件的属性
  properties: {
    tabs: {
      type: Array,
      value: []
    },
    color: {
      type: String,
      value: '#7A7E83'
    },
    selectedColor: {
      type: String,
      value: '#3cc51f'
    }
  },


  // 定义组件的内部数据
  data: {
    currentIndex: 0
  },


  // 定义组件的方法
  methods: {
    onTabClick(e) {
      const index = e.currentTarget.dataset.index;
      this.setData({
        currentIndex: index
      });
      const url = this.properties.tabs[index].pagePath;
      wx.switchTab({ url });
    }
  },


  // 组件生命周期
  ready() {
    const currentPage = getCurrentPages().pop();
    const currentRoute = currentPage.route;
    const currentIndex = this.properties.tabs.findIndex(tab => tab.pagePath === `/${currentRoute}`);
    this.setData({
      currentIndex: currentIndex !== -1 ? currentIndex : 0
    });
  }
});

custom-tab-bar.wxml

<view class="tab-bar">
  <block wx:for="{{tabs}}" wx:key="index">
    <view class="tab-item" data-index="{{index}}" bindtap="onTabClick">
      <image class="tab-icon" src="{{item.iconPath}}" wx:if="{{!item.selected}}"></image>
      <image class="tab-icon" src="{{item.selectedIconPath}}" wx:elif="{{item.selected}}"></image>
      <text class="tab-text" style="color: {{item.selected ? selectedColor : color}};">{{item.text}}</text>
    </view>
  </block>
</view>

custom-tab-bar.wxss

.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  padding: 10px 0;
  border-top: 1px solid #e0e0e0;
}


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


.tab-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 5px;
}


.tab-text {
  font-size: 24rpx;
}

以上两种路径填写方式，均未能识别