mini-shop/custom-tab-bar/index.wxml

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-layout">
<cover-view class="tab-bar">
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-sj="{{item}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{index === selectIndex ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{index === selectIndex ? selectedColor : color}}">{{item.text}} </cover-view>
    <cover-view class="icon" wx:if="{{index === tips.index}}">{{tips.count}}</cover-view>
  </cover-view>
</cover-view>
<cover-view 
  wx:for="{{list}}"
  wx:key="index"
  class="keynote"
  data-path="{{item.pagePath}}"
  data-index="{{index}}"
  bindtap="switchTab"
  style="left: {{index * (1 / list.length) * 100}}%; width: {{(1 / list.length * 100)}}%"
  wx:if="{{item.keynote}}">
  <cover-image src="{{item.keyiconPath}}"></cover-image>
</cover-view>

</cover-view>