index.axml 2.6 KB

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