支付寶小程序擴展組件 步驟條·Steps

根據(jù)步驟顯示的進度條。

掃碼體驗

示例代碼

{
 "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 的內(nèi)容</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 的內(nèi)容</view>
  <view slot="desc_4">當(dāng)前 item 沒有 <text style="color: green;">description</text> 時，使用 slot 內(nèi)容。</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 的內(nèi)容</view>
  <view slot="desc_4">當(dāng)前 item 沒有 <text style="color: green;">description</text> 時，使用 slot 內(nèi)容。</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">設(shè)置錯誤項</button>
  <button class="demo-btn" onTap="cancelFailIndex">取消錯誤項</button>
</view>
<view class="demo-btn-container">
  <button class="demo-btn" onTap="setIconSizeAdd">設(shè)置圖標大小+</button>
  <button class="demo-btn" onTap="setIconSizeReduce">設(shè)置圖標大小-</button>
</view>
<button type="primary" onTap="showNumberList">以{{!showNumberSteps?'數(shù)字':'圖片/icon'}}方式展示步驟序列</button>

Page({
  data: {
    activeIndex: 1,
    failIndex: 0,
    size: 0,
    items: [{
      title: '步驟1',
    }, {
      title: '步驟2',
    }, {
      title: '步驟3',
    }],
    items2: [{
      title: '步驟1',
      description: '這是步驟1的描述文檔，文字足夠多的時候會換行，設(shè)置了成功的icon',
      activeIcon: 'https://i.alipayobjects.com/common/favicon/favicon.ico',
      size: 20,
    }, {
      title: '步驟2 如果標題足夠長的話也會換行的',
      description: '這是步驟2，同時設(shè)置了兩種狀態(tài)的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 插槽可根據(jù)具體的步驟數(shù)設(shè)置，如有 4 個步驟點，那么可插入 4 個 slot。

slot 名稱的格式為：desc_1、desc_2、desc_n...以此類推，將 n 修改為指定 items 的序列即可。如下列代碼將會第 4 個 items 中沒有 description 值的時候顯示 slot 內(nèi)容。為了滿足需求，當(dāng) title 部分沒有值時，也可以通過類似方式插入 slot 內(nèi)容。水平方向與垂直方向的 steps 組件都可以使用這兩個 slot。

<view slot="title_2" style="color: green; font-weight: bold;">titile 的內(nèi)容</view>
<view slot="desc_4">當(dāng)前 item 沒有 <text style="color: green;">description</text> 時，使用 slot 內(nèi)容。</view>

下表中的 n 代表從 1 開始累加的數(shù)字



| slotName | 說明 |
| -------- | ---------------------------------- |
| desc_n | 當(dāng)無 description 值時可展示的 slot |
| title_n | 當(dāng)無 title 值時可展示的 slot |

items

Bug & Tip

• 當(dāng) showStepNumber 為 true 時將會忽略 items 屬性中 icon 相關(guān)屬性，僅以數(shù)字序列方式展示；
• slot 中的數(shù)字與 items 的序列相對應(yīng)，將會在 items 屬性中沒有 description 時展示；