支付宝小程序扩展组件 步骤条·Steps

根据步骤显示的进度条。

扫码体验

示例代码

{
 "defaultTitle": "Steps",
 "usingComponents": {
   "steps": "mini-ali-ui/es/steps/index"
 }
}
<steps 
  className="demo-steps-class"
  activeIndex="{{activeIndex}}"
  failIndex="{{failIndex}}"
  items="{{items}}"
>
  <view slot="title_2" style="color: green; font-weight: bold;">titile 的内容</view>
</steps>
<steps 
  className="demo-steps-class"
  activeIndex="{{activeIndex}}"
  failIndex="{{failIndex}}"
  horizHighlight="{{true}}"
  items="{{items2}}"
>
  <view slot="title_2" style="color: green; font-weight: bold;">titile 的内容</view>
  <view slot="desc_4">当前 item 没有 <text style="color: green;">description</text> 时，使用 slot 内容。</view>
</steps>
<steps 
  className="demo-steps-class"
  direction="vertical"
  failIndex="{{failIndex}}"
  activeIndex="{{activeIndex}}"
  items="{{items2}}"
  size="{{size}}"
  showStepNumber="{{showNumberSteps}}"
>
  <view slot="title_2" style="color: green; font-weight: bold;">titile 的内容</view>
  <view slot="desc_4">当前 item 没有 <text style="color: green;">description</text> 时，使用 slot 内容。</view>
</steps>
<view class="demo-btn-container">
  <button class="demo-btn" onTap="preStep">上一步</button>
  <button class="demo-btn" onTap="nextStep">下一步</button>
</view>
<view class="demo-btn-container">
  <button class="demo-btn" onTap="setFailIndex">设置错误项</button>
  <button class="demo-btn" onTap="cancelFailIndex">取消错误项</button>
</view>
<view class="demo-btn-container">
  <button class="demo-btn" onTap="setIconSizeAdd">设置图标大小+</button>
  <button class="demo-btn" onTap="setIconSizeReduce">设置图标大小-</button>
</view>
<button type="primary" onTap="showNumberList">以{{!showNumberSteps?'数字':'图片/icon'}}方式展示步骤序列</button>

Page({
  data: {
    activeIndex: 1,
    failIndex: 0,
    size: 0,
    items: [{
      title: '步骤1',
    }, {
      title: '步骤2',
    }, {
      title: '步骤3',
    }],
    items2: [{
      title: '步骤1',
      description: '这是步骤1的描述文档，文字足够多的时候会换行，设置了成功的icon',
      activeIcon: 'https://i.alipayobjects.com/common/favicon/favicon.ico',
      size: 20,
    }, {
      title: '步骤2 如果标题足够长的话也会换行的',
      description: '这是步骤2，同时设置了两种状态的icon',
      icon: 'https://gw.alipayobjects.com/mdn/miniProgram_mendian/afts/img/A*lVojToO-qZIAAAAAAAAAAABjAQAAAQ/original',
      activeIcon: 'https://i.alipayobjects.com/common/favicon/favicon.ico',
    }, {
      title: '步骤3',
      description: '这是步骤3',
    }, {
      title: '步骤4',
    }],
    showNumberSteps: true,
  },
  nextStep() {
    this.setData({
      activeIndex: this.data.activeIndex + 1,
    });
  },
  preStep() {
    this.setData({
      activeIndex: this.data.activeIndex - 1,
    });
  },
  setFailIndex() {
    this.setData({
      failIndex: 3,
    });
  },
  cancelFailIndex() {
    this.setData({
      failIndex: 0,
    });
  },
  setIconSizeAdd() {
    this.setData({
      size: this.data.size < 30 && this.data.size > 14 ? this.data.size + 1 : 15,
    });
  },
  setIconSizeReduce() {
    this.setData({
      size: this.data.size > 15 ? this.data.size - 1 : 15,
    });
  },
  showNumberList() {
    this.setData({
      showNumberSteps: !this.data.showNumberSteps,
    });
  },
});

.demo-steps-class {
  margin: 20px 0;
  border-bottom: 1px solid #e5e5e5;
}
.demo-btn-container {
  display: flex;
  justify-content: space-between;
  margin: 20px;
}
.demo-btn {
  width: 47%;
}

属性

slot

steps 组件中的 slot 插槽可根据具体的步骤数设置，如有 4 个步骤点，那么可插入 4 个 slot。

slot 名称的格式为：desc_1、desc_2、desc_n...以此类推，将 n 修改为指定 items 的序列即可。如下列代码将会第 4 个 items 中没有 description 值的时候显示 slot 内容。为了满足需求，当 title 部分没有值时，也可以通过类似方式插入 slot 内容。水平方向与垂直方向的 steps 组件都可以使用这两个 slot。

<view slot="title_2" style="color: green; font-weight: bold;">titile 的内容</view>
<view slot="desc_4">当前 item 没有 <text style="color: green;">description</text> 时，使用 slot 内容。</view>

下表中的 n 代表从 1 开始累加的数字



| slotName | 说明 |
| -------- | ---------------------------------- |
| desc_n | 当无 description 值时可展示的 slot |
| title_n | 当无 title 值时可展示的 slot |

items

Bug & Tip

• 当 showStepNumber 为 true 时将会忽略 items 属性中 icon 相关属性，仅以数字序列方式展示；
• slot 中的数字与 items 的序列相对应，将会在 items 属性中没有 description 时展示；