index.wxml 5.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <view class="container-loading l-container-class {{fullScreen ? 'content': ''}}" wx:if="{{show && fullScreen}}" style="background:{{bgColor}};opacity:{{opacity}};z-index:{{zIndex}}" catchtouchmove="doNothingMove">
  2. <view wx:if="{{show}}"
  3. class="l-class {{type + '-spinner'}} {{type=='change'||custom?'':'spinner-' + type + '-' + size}}"
  4. style="margin-bottom:{{distance}}px">
  5. <block wx:if="{{custom}}">
  6. <slot />
  7. </block>
  8. <block wx:else>
  9. <view wx:if="{{type=='flash' || type=='change' || type=='flip'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce1'}} {{'spinner-'+ type + '-' + size}}"></view>
  10. <view wx:if="{{type=='flash' || type=='change'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce2'}} {{'spinner-'+ type + '-' + size}}"></view>
  11. <view wx:if="{{type=='change'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce3'}} {{'spinner-'+ type + '-' + size}}"></view>
  12. <view class="spinner-circle {{'spinner-circle-' + size}}" wx:if="{{ type === 'circle'}}">
  13. <view class="spinner-container container1">
  14. <view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
  15. <view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
  16. <view class="circle3 {{type + '-' + size}}" style="background: {{color}}"></view>
  17. <view class="circle4 {{type + '-' + size}}" style="background: {{color}}"></view>
  18. </view>
  19. <view class="spinner-container container2">
  20. <view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
  21. <view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
  22. <view class="circle3 {{type + '-' + size}}" style="background: {{color}}"></view>
  23. <view class="circle4 {{type + '-' + size}}" style="background: {{color}}"></view>
  24. </view>
  25. <view class="spinner-container container3">
  26. <view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
  27. <view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
  28. <view class="circle3 {{type + '-' + size}}" style="background: {{color}}"></view>
  29. <view class="circle4 {{type + '-' + size}}" style="background: {{color}}"></view>
  30. </view>
  31. </view>
  32. <view wx:if="{{ type === 'rotate'}}">
  33. <view class="rotate rotate-{{size}}" style="border-color: {{color}};"></view>
  34. </view>
  35. </block>
  36. </view>
  37. </view>
  38. <view wx:if="{{!fullScreen}}" class="l-container-class" style="position: relative">
  39. <slot name="content"/>
  40. <view wx:if="{{show}}" class="inner-loading-container" style="background:{{bgColor}};opacity:{{opacity}};z-index:{{zIndex}}"></view>
  41. <view wx:if="{{show}}" class="l-class loading-icon-container" style="z-index:{{zIndex + 1}}">
  42. <view class="{{type + '-spinner'}} {{type=='change'||custom?'':'spinner-' + type + '-' + size}}">
  43. <block wx:if="{{custom}}">
  44. <slot />
  45. </block>
  46. <block wx:else>
  47. <view wx:if="{{type=='flash' || type=='change' || type=='flip'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce1'}} {{'spinner-'+ type + '-' + size}}"></view>
  48. <view wx:if="{{type=='flash' || type=='change'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce2'}} {{'spinner-'+ type + '-' + size}}"></view>
  49. <view wx:if="{{type=='change'}}" style="{{color?'background-color:'+color:''}}" class="{{type+'-bounce3'}} {{'spinner-'+ type + '-' + size}}"></view>
  50. <view wx:if="{{ type === 'circle'}}" class="spinner-circle {{'spinner-circle-' + size}}">
  51. <view class="spinner-container container1">
  52. <view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
  53. <view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
  54. <view class="circle3 {{type + '-' + size}}" style="background: {{color}}"></view>
  55. <view class="circle4 {{type + '-' + size}}" style="background: {{color}}"></view>
  56. </view>
  57. <view class="spinner-container container2">
  58. <view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
  59. <view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
  60. <view class="circle3 {{type + '-' + size}}" style="background: {{color}}"></view>
  61. <view class="circle4 {{type + '-' + size}}" style="background: {{color}}"></view>
  62. </view>
  63. <view class="spinner-container container3">
  64. <view class="circle1 {{type + '-' + size}}" style="background: {{color}}"></view>
  65. <view class="circle2 {{type + '-' + size}}" style="background: {{color}}"></view>
  66. <view class="circle3 {{type + '-' + size}}" style="background: {{color}}"></view>
  67. <view class="circle4 {{type + '-' + size}}" style="background: {{color}}"></view>
  68. </view>
  69. </view>
  70. <view wx:if="{{ type === 'rotate'}}">
  71. <view class="rotate rotate-{{size}}" style="border-color: {{color}};"></view>
  72. </view>
  73. </block>
  74. </view>
  75. </view>
  76. </view>