MiniProgram/ProjectLiaisonForm/pages/guide/content/index.wxml

<view>
  <view class="main-title">
    <view class="title-major">用户引导标题</view>
    <view class="title-sub"> 按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。 </view>
  </view>
  <view class="field label-field">
    <t-input label="标签文字" layout="vertical" placeholder="请输入文字"></t-input>
  </view>
  <view class="field">
    <t-input label="标签文字" layout="vertical" placeholder="请输入文字"></t-input>
  </view>
  <view class="action">
    <t-button block theme="light" size="large">重置</t-button>
    <t-button block theme="primary" size="large">确定</t-button>
  </view>
</view>

<t-guide current="{{current}}" steps="{{steps}}" bind:skip="close" bind:finish="close">
  <view slot="content-0" class="content">
    <t-icon name="arrow-up" size="64rpx" color="#fff" class="icon" />
    <p class="text">1、自定义的图形或说明文案，用来解释或指导该功能使用。</p>
    <view class="footer">
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="light"
        content="跳过"
        size="extra-small"
        bindtap="skip"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="light"
        content="返回"
        size="extra-small"
        bindtap="back"
      ></t-button>
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="primary"
        content="下一步"
        size="extra-small"
        bindtap="next"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="primary"
        content="完成"
        size="extra-small"
        bindtap="finish"
      ></t-button>
    </view>
  </view>
  <view slot="content-1" class="content">
    <t-icon name="arrow-up" size="64rpx" color="#fff" class="icon" />
    <p class="text">2、自定义的图形或说明文案，用来解释或指导该功能使用。</p>
    <view class="footer">
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="light"
        content="跳过"
        size="extra-small"
        bindtap="skip"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="light"
        content="返回"
        size="extra-small"
        bindtap="back"
      ></t-button>
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="primary"
        content="下一步"
        size="extra-small"
        bindtap="next"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="primary"
        content="完成"
        size="extra-small"
        bindtap="finish"
      ></t-button>
    </view>
  </view>
  <view slot="content-2" class="content">
    <t-icon name="arrow-up" size="64rpx" color="#fff" class="icon" />
    <p class="text">3、自定义的图形或说明文案，用来解释或指导该功能使用。</p>
    <view class="footer">
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="light"
        content="跳过"
        size="extra-small"
        bindtap="skip"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="light"
        content="返回"
        size="extra-small"
        bindtap="back"
      ></t-button>
      <t-button
        wx:if="{{current < steps.length - 1}}"
        theme="primary"
        content="下一步"
        size="extra-small"
        bindtap="next"
        class="guide-demo-button"
      ></t-button>
      <t-button
        wx:else
        class="guide-demo-button"
        theme="primary"
        content="完成"
        size="extra-small"
        bindtap="finish"
      ></t-button>
    </view>
  </view>
</t-guide>