swiper.wxml 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <wxs src="./index.wxs" module="this" />
  2. <wxs src="../common/utils.wxs" module="_" />
  3. <import src="../common/template/image.wxml" />
  4. <view 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. >
  28. <template
  29. is="image"
  30. data="{{ class: classPrefix + '__image-host', tClass: this.getImageClass(prefix, current, index, list), style: 'height: ' + _.addUnit(height), src: item, ...imageProps }}"
  31. />
  32. </swiper-item>
  33. </swiper>
  34. <t-swiper-nav
  35. wx:if="{{navigation}}"
  36. t-class="{{prefix}}-class-nav"
  37. type="{{navigation.type || 'dots'}}"
  38. current="{{navCurrent || 0}}"
  39. total="{{list.length || 0}}"
  40. direction="{{direction || 'horizontal'}}"
  41. pagination-position="{{paginationPosition || 'bottom'}}"
  42. min-show-num="{{navigation.minShowNum || 2}}"
  43. show-controls="{{navigation.showControls || false}}"
  44. bind:navBtnChange="onNavBtnChange"
  45. />
  46. <slot name="nav" />
  47. </view>