swiper.wxml 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <wxs src="./index.wxs" module="this" />
  2. <wxs src="../common/utils.wxs" module="_" />
  3. <import src="../common/template/image.wxml" />
  4. <view class="class {{prefix}}-class {{classPrefix}}" style="{{_._style([style, customStyle])}}">
  5. <swiper
  6. class="{{classPrefix}}-host"
  7. autoplay="{{autoplay}}"
  8. current="{{current}}"
  9. interval="{{interval}}"
  10. duration="{{duration}}"
  11. circular="{{loop}}"
  12. vertical="{{direction == 'vertical'}}"
  13. easing-function="{{easingFunction}}"
  14. previous-margin="{{previousMargin}}"
  15. next-margin="{{nextMargin}}"
  16. snap-to-edge="{{snapToEdge}}"
  17. display-multiple-items="{{displayMultipleItems}}"
  18. style="height: {{_.addUnit(height)}}"
  19. bindchange="onChange"
  20. >
  21. <swiper-item
  22. wx:for="{{list}}"
  23. wx:key="index"
  24. class="{{_.cls(classPrefix + '__item', [['preview', this.isPrev(current, index, list)], ['next', this.isNext(current, index, list)]])}}"
  25. data-index="{{index}}"
  26. bind:tap="onTap"
  27. aria-hidden="{{navCurrent !== index}}"
  28. aria-role="image"
  29. aria-label="{{_.isObject(item) ? item.ariaLabel : ''}}"
  30. >
  31. <template
  32. is="image"
  33. data="{{ class: classPrefix + '__image-host', tClass: this.getImageClass(prefix, current, index, list), style: 'height: ' + _.addUnit(height), src: _.isObject(item) ? item.value : item, mode: 'aspectFill', ...imageProps }}"
  34. />
  35. </swiper-item>
  36. </swiper>
  37. <t-swiper-nav
  38. wx:if="{{navigation}}"
  39. t-class="{{prefix}}-class-nav"
  40. type="{{navigation.type || 'dots'}}"
  41. current="{{navCurrent || 0}}"
  42. total="{{list.length || 0}}"
  43. direction="{{direction || 'horizontal'}}"
  44. pagination-position="{{paginationPosition || 'bottom'}}"
  45. min-show-num="{{navigation.minShowNum || 2}}"
  46. show-controls="{{navigation.showControls || false}}"
  47. bind:nav-btn-change="onNavBtnChange"
  48. />
  49. <slot name="nav" />
  50. </view>