index.wxml 1.3 KB

123456789101112131415161718192021222324252627282930313233
  1. <!--miniprogram/custom-tab-bar/index.wxml-->
  2. <view
  3. wx:if="{{show}}"
  4. class="tab-bar tab-bar-{{position}}"
  5. style='background: {{backgroundImg? "url("+ backgroundImg+ ")" : backgroundColor}}'>
  6. <view class="tab-bar-border" style='background: {{borderStyle}}' ></view>
  7. <view
  8. wx:for="{{list}}"
  9. wx:for-index="idx"
  10. wx:key="index"
  11. class="tab-bar-item {{item.style === 'circle' ? 'circle': ''}}"
  12. data-path="{{item.pagePath}}"
  13. data-index="{{idx}}"
  14. bindtap="switchTab">
  15. <view wx:if="{{item.style === 'circle'}}" class='item-circle'></view>
  16. <image
  17. class='tab-bar-item-image'
  18. wx:if="{{item.style != 'circle'}}"
  19. style='height: {{item.iconSize}}rpx; width: {{item.iconSize}}rpx'
  20. src="{{selected === idx ? item.selectedIconPath : item.iconPath}}"></image>
  21. <image
  22. wx:else
  23. class='tab-bar-item-image'></image>
  24. <image
  25. class='center-circle'
  26. wx:if="{{item.style === 'circle'}}"
  27. src="{{selected === idx ? item.selectedIconPath : item.iconPath}}" ></image>
  28. <view
  29. style="font-size: {{fontSize}}rpx ;color: {{selected === idx ? selectedColor : color}}">{{item.text}}</view>
  30. <view wx:if="{{item.redDot}}" class='reddot'></view>
  31. <view wx:if="{{item.badge}}" class='badge'>{{item.badge}}</view>
  32. </view>
  33. </view>