index.axml 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <import-sjs
  2. from="./index.sjs"
  3. name="utils" />
  4. <view
  5. a:if="{{ visible }}"
  6. class="ant-guide-tour {{ className || '' }}"
  7. style="{{ style || '' }}">
  8. <mask
  9. show
  10. className="{{ maskClassName }}"
  11. style="z-index:9999;{{ maskStyle || '' }}" />
  12. <ant-icon
  13. type="CloseOutline"
  14. className="ant-guide-tour-clear"
  15. onTap="onCancel" />
  16. <view class="ant-guide-tour-button">
  17. <ant-button
  18. a:if="{{ utils.checkShowJump(mixin.value, items) }}"
  19. inline
  20. size="small"
  21. onTap="onCancel">
  22. {{ jumpText }}
  23. </ant-button>
  24. <ant-button
  25. a:if="{{ utils.checkShowPrev(mixin.value, items) }}"
  26. inline
  27. size="small"
  28. onTap="onPrev"
  29. data-currentValue="{{ mixin.value }}">
  30. {{ prevStepText }}
  31. </ant-button>
  32. <ant-button
  33. a:if="{{ utils.checkShowNext(mixin.value, items) }}"
  34. inline
  35. size="small"
  36. onTap="onNext"
  37. data-currentValue="{{ mixin.value }}">
  38. {{ nextStepText }}
  39. </ant-button>
  40. <ant-button
  41. a:if="{{ utils.checkShowKnow(mixin.value, items) }}"
  42. inline
  43. size="small"
  44. onTap="onCancel">
  45. {{ gotItText }}
  46. </ant-button>
  47. </view>
  48. <block a:if="{{ swiperable }}">
  49. <view class="ant-guide-tour-indicator">
  50. <block
  51. a:for="{{ items }}"
  52. a:for-index="index"
  53. a:for-item="item">
  54. <view
  55. class="ant-guide-tour-indicator-dot {{ index === mixin.value ? 'ant-guide-tour-indicator-dot-active' : '' }}" />
  56. </block>
  57. </view>
  58. <swiper
  59. class="ant-guide-tour-swiper"
  60. current="{{ mixin.value }}"
  61. adjust-height="none"
  62. style="height: 100vh"
  63. onChange="onSwiperChange">
  64. <block
  65. a:for="{{ items }}"
  66. a:for-index="index"
  67. a:for-item="item">
  68. <swiper-item>
  69. <view
  70. class="ant-guide-tour-item {{ item.className || '' }}"
  71. style="top:{{ item.top }}px; left:{{ item.left }}px">
  72. <slot
  73. name="step"
  74. index="{{ mixin.current }}">
  75. <image
  76. a:if="{{ item.imageUrl }}"
  77. class="ant-guide-tour-item-img"
  78. src="{{ item.imageUrl }}"
  79. style="{{ item.imageStyle }}"
  80. mode="{{ item.imageMode }}" />
  81. </slot>
  82. </view>
  83. </swiper-item>
  84. </block>
  85. </swiper>
  86. </block>
  87. <block a:else>
  88. <block
  89. a:for="{{ items }}"
  90. a:for-index="index"
  91. a:for-item="item">
  92. <view
  93. a:if="{{ mixin.value === index }}"
  94. class="ant-guide-tour-item {{ item.className || '' }}"
  95. style="top:{{ item.top }}px; left:{{ item.left }}px">
  96. <slot
  97. name="step"
  98. index="{{ index }}">
  99. <image
  100. a:if="{{ item.imageUrl }}"
  101. class="ant-guide-tour-item-img"
  102. src="{{ item.imageUrl }}"
  103. style="{{ item.imageStyle }}"
  104. mode="{{ item.imageMode }}" />
  105. </slot>
  106. </view>
  107. </block>
  108. </block>
  109. </view>