loading.wxml 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <wxs src="../common/utils.wxs" module="_" />
  2. <view
  3. style="{{_._style([style, customStyle, (!text && theme != 'error' && 'width: ' + _.addUnit(size) + '; height: ' + _.addUnit(size))])}}"
  4. class="class {{prefix}}-class"
  5. >
  6. <view
  7. wx:if="{{theme === 'bar' && theme !== 'error'}}"
  8. style="{{progress >= 0 ? 'width:' + progress + '%' : ''}}"
  9. class="{{prefix}}-class-indicator {{classPrefix}}__bar {{classPrefix}}__bar--{{progress < 0 ? 'animation' : progress < 100 ? 'static': ''}} {{progress >= 100 || !loading ? classPrefix + '__bar--loaded' : ''}}"
  10. ></view>
  11. <view class="{{classPrefix}} {{classPrefix + '--' + layout}}" style="{{show ? '' : 'display:none'}}" wx:else>
  12. <view
  13. wx:if="{{indicator && theme != 'error'}}"
  14. class="{{prefix}}-class-indicator {{classPrefix}}__spinner {{classPrefix}}__spinner--{{ theme }} {{reverse ? 'reverse' : ''}}"
  15. style="width: {{ _.addUnit(size) }}; height: {{ _.addUnit(size) }}; {{inheritColor ? 'color: inherit' : ''}} {{indicator ? '' : 'display:none'}}; {{duration ? 'animation-duration: ' + duration / 1000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
  16. aria-role="{{ theme !== 'error' ? ariaRole || 'img' : ''}}"
  17. aria-label="{{ ariaLabel || text || '加载中' }}"
  18. >
  19. <view wx:if="{{ theme === 'spinner' }}" wx:for="{{12}}" wx:key="index" class="{{classPrefix}}__dot" />
  20. <view wx:if="{{ theme === 'circular' }}" class="{{classPrefix}}__circular" />
  21. <block wx:if="{{ theme === 'dots' }}">
  22. <view
  23. class="{{classPrefix}}__dot"
  24. style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + 0 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
  25. ></view>
  26. <view
  27. class="{{classPrefix}}__dot"
  28. style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + duration * 1 / 3000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
  29. ></view>
  30. <view
  31. class="{{classPrefix}}__dot"
  32. style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + duration * 2 / 3000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
  33. ></view>
  34. </block>
  35. </view>
  36. <view
  37. class="{{_.cls(classPrefix + '__text', [layout])}} {{prefix}}-class-text"
  38. aria-hidden="{{indicator && theme != 'error'}}"
  39. aria-label="{{ ariaLabel || text }}"
  40. >
  41. <view wx:if="{{theme === 'error'}}">
  42. 加载失败
  43. <text class="{{classPrefix}}__refresh-btn" bind:tap="refreshPage" aria-role="button">刷新</text>
  44. </view>
  45. <block wx:if="{{text}}">{{text}}</block>
  46. <slot name="text" />
  47. <slot />
  48. </view>
  49. </view>
  50. </view>