index.axml

<import-sjs
  from="./index.sjs"
  name="utils" />

<view
  a:if="{{ visible }}"
  class="ant-guide-tour {{ className || '' }}"
  style="{{ style || '' }}">
  <mask
    show
    className="{{ maskClassName }}"
    style="z-index:9999;{{ maskStyle || '' }}" />
  <ant-icon
    type="CloseOutline"
    className="ant-guide-tour-clear"
    onTap="onCancel" />
  <view class="ant-guide-tour-button">
    <ant-button
      a:if="{{ utils.checkShowJump(mixin.value, items) }}"
      inline
      size="small"
      onTap="onCancel">
      {{ jumpText }}
    </ant-button>
    <ant-button
      a:if="{{ utils.checkShowPrev(mixin.value, items) }}"
      inline
      size="small"
      onTap="onPrev"
      data-currentValue="{{ mixin.value }}">
      {{ prevStepText }}
    </ant-button>
    <ant-button
      a:if="{{ utils.checkShowNext(mixin.value, items) }}"
      inline
      size="small"
      onTap="onNext"
      data-currentValue="{{ mixin.value }}">
      {{ nextStepText }}
    </ant-button>
    <ant-button
      a:if="{{ utils.checkShowKnow(mixin.value, items) }}"
      inline
      size="small"
      onTap="onCancel">
      {{ gotItText }}
    </ant-button>
  </view>
  <block a:if="{{ swiperable }}">
    <view class="ant-guide-tour-indicator">
      <block
        a:for="{{ items }}"
        a:for-index="index"
        a:for-item="item">
        <view
          class="ant-guide-tour-indicator-dot {{ index === mixin.value ? 'ant-guide-tour-indicator-dot-active' : '' }}" />
      </block>
    </view>
    <swiper
      class="ant-guide-tour-swiper"
      current="{{ mixin.value }}"
      adjust-height="none"
      style="height: 100vh"
      onChange="onSwiperChange">
      <block
        a:for="{{ items }}"
        a:for-index="index"
        a:for-item="item">
        <swiper-item>
          <view
            class="ant-guide-tour-item {{ item.className || '' }}"
            style="top:{{ item.top }}px; left:{{ item.left }}px">
            <slot
              name="step"
              index="{{ current }}">
              <image
                a:if="{{ item.imageUrl }}"
                class="ant-guide-tour-item-img"
                src="{{ item.imageUrl }}"
                style="{{ item.imageStyle }}"
                mode="{{ item.imageMode }}" />
            </slot>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </block>
  <block a:else>
    <block
      a:for="{{ items }}"
      a:for-index="index"
      a:for-item="item">
      <view
        a:if="{{ mixin.value === index }}"
        class="ant-guide-tour-item {{ item.className || '' }}"
        style="top:{{ item.top }}px; left:{{ item.left }}px">
        <slot
          name="step"
          index="{{ index }}">
          <image
            a:if="{{ item.imageUrl }}"
            class="ant-guide-tour-item-img"
            src="{{ item.imageUrl }}"
            style="{{ item.imageStyle }}"
            mode="{{ item.imageMode }}" />
        </slot>
      </view>
    </block>
  </block>
</view>