grid.wxml 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template name="grid">
  2. <block wx:if="{{gridThemeItems.length === 1}}">
  3. <t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}" class="{{classPrefix}}__single-wrap">
  4. <t-grid-item
  5. t-class="{{classPrefix}}__grid-item"
  6. class="{{classPrefix}}__square"
  7. wx:for="{{gridThemeItems[0]}}"
  8. wx:key="index"
  9. bind:tap="onSelect"
  10. data-index="{{index}}"
  11. icon="{{ { name: item.icon, color: item.color } }}"
  12. text="{{item.label || ''}}"
  13. image="{{item.image || ''}}"
  14. style="--td-grid-item-text-color: {{item.color}}"
  15. >
  16. </t-grid-item>
  17. </t-grid>
  18. </block>
  19. <block wx:elif="{{gridThemeItems.length > 1}}">
  20. <view class="{{classPrefix}}__swiper-wrap">
  21. <swiper style="height: 456rpx" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange">
  22. <swiper-item wx:for="{{gridThemeItems}}" wx:key="index">
  23. <t-grid align="center" t-class="{{classPrefix}}__grid {{classPrefix}}__grid--swiper" column="{{count / 2}}">
  24. <t-grid-item
  25. t-class="{{classPrefix}}__grid-item"
  26. class="{{classPrefix}}__square"
  27. wx:for="{{item}}"
  28. wx:key="index"
  29. data-index="{{index}}"
  30. bind:tap="onSelect"
  31. icon="{{ { name: item.icon, color: item.color } }}"
  32. text="{{item.label || ''}}"
  33. image="{{item.image || ''}}"
  34. style="--td-grid-item-text-color: {{item.color}}"
  35. >
  36. </t-grid-item>
  37. </t-grid>
  38. </swiper-item>
  39. </swiper>
  40. <view class="{{classPrefix}}__nav">
  41. <view class="{{classPrefix}}__dots">
  42. <view
  43. wx:for="{{gridThemeItems.length}}"
  44. wx:key="index"
  45. class="{{classPrefix}}__dots-item {{index === currentSwiperIndex ? prefix + '-is-active' : ''}}"
  46. />
  47. </view>
  48. </view>
  49. </view>
  50. </block>
  51. </template>