什么是步骤条(Steps)_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

引导用户按照流程完成任务的导航条。当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。

属性

Steps

属性	类型	必填	默认值	说明
index	number	否	0	当前进度
direction	'horizontal' \| 'vertical'	否	'horizontal'	方向
uid	string	否	-	当页面有多个 Steps 时需传入，必须页面唯一，与内部的 StepItem 组件的 uid 一致
className	string	否	-	类名

属性	类型	必填	默认值	说明
index	number	是	-	小程序必填，用于标记当前是第几步，必须按顺序递增
title	string \| slot	是	-	标题
desc	string \| slot	否	-	补充信息
fail	boolean	否	false	是否失败步骤
icon	string \| slot	否	-	图标，横向和纵向都有各自的默认图标
activeIcon	string \| slot	否	-	激活步骤图标，横向和纵向都有各自的默认图标
failIcon	string \| slot	否	-	失败步骤图标，横向和纵向都有各自的默认图标
uid	string	否	-	当页面有多个 Steps 时需传入，必须页面唯一，与外部的 Steps 组件的 uid 一致
className	string	否	-	类名

插槽

名称	说明
title	标题内容插槽
desc	补充内容插槽
icon	默认图标插槽
activeIcon	激活步骤图标插槽
failIcon	失败步骤图标插槽

样式类

类名	说明
amd-steps	整体样式
amd-steps-horizontal	整体样式
amd-steps-vertical	整体样式

类名	说明
amd-steps-item	整体样式
amd-steps-item-horizontal	整体样式
amd-steps-item-vertical	整体样式
amd-steps-item-line	步骤条样式
amd-steps-item-line-fail	错误步骤条样式
amd-steps-item-icon	图标样式
amd-steps-item-text	文字区域样式
amd-steps-item-title	标题样式
amd-steps-item-desc	补充说明样式

代码示例

基本使用

index.axml 的代码示例如下：

<view class="demo">
  <demo-block title="横向步骤条">
    <steps 
      index="{{1}}" 
      direction="horizontal"
      uid="steps-1">
      <step-item 
        index="{{0}}" 
        title="第一步" 
        desc="描述" 
        uid="steps-1"
      />

      <step-item 
        index="{{1}}" 
        desc="描述"
        uid="steps-1">
        <view slot="title">第二步</view>
      </step-item>
      
      <step-item 
        index="{{2}}" 
        title="第三步"
        uid="steps-1">
        <view slot="desc">描述</view>
      </step-item>
    </steps>  
  </demo-block>
  <demo-block title="横向步骤条失败">
    <steps 
      index="{{2}}" 
      uid="steps-2">
      <step-item 
        index="{{0}}" 
        title="第一步" 
        uid="steps-2"/>
      <step-item 
        index="{{1}}" 
        title="第二步"
        uid="steps-2">
      </step-item>
      
      <step-item 
        fail
        index="{{2}}" 
        title="第三步"
        uid="steps-2">
      </step-item>
      
      <step-item 
        index="{{3}}" 
        title="第四步"
        uid="steps-2">
      </step-item>
    </steps>
  </demo-block>
  <demo-block title="纵向步骤条">
    <steps 
      direction="vertical"
      index="{{2}}" 
      uid="steps-3">
      <step-item 
        index="{{0}}" 
        title="第一步" 
        uid="steps-3"/>
      <step-item 
        index="{{1}}" 
        title="第二步"
        uid="steps-3">
      </step-item>
      
      <step-item 
        index="{{2}}" 
        title="第三步"
        uid="steps-3">
      </step-item>
      
      <step-item 
        index="{{3}}" 
        title="第四步"
        uid="steps-3">
      </step-item>
    </steps>
  </demo-block>
  <demo-block title="纵向步骤条失败">
    <steps 
      direction="vertical"
      index="{{2}}" 
      uid="steps-4">
      <step-item 
        index="{{0}}" 
        title="第一步" 
        uid="steps-4"/>
      <step-item 
        index="{{1}}" 
        title="第二步"
        uid="steps-4">
      </step-item>
      
      <step-item 
        fail
        index="{{2}}" 
        title="第三步"
        uid="steps-4">
      </step-item>
      
      <step-item 
        index="{{3}}" 
        title="第四步"
        uid="steps-4">
      </step-item>
    </steps>
  </demo-block>
  
  <demo-block title="自定义图标">
    <steps 
      index="{{2}}" 
      direction="horizontal"
      uid="steps-5">
      <step-item 
        index="{{0}}" 
        title="第一步" 
        desc="desc 部分的内容" 
        uid="steps-5">
          <icon slot="activeIcon" type="FireFill" className="steps-icon"/>
      </step-item>
      
      <step-item 
        index="{{1}}" 
        desc="第二步"
        fail="{{true}}"
        uid="steps-5">
        <icon slot="failIcon" type="CloseCircleFill" className="steps-icon"/>
        <view slot="title">title slot</view>
      </step-item>
      
      <step-item 
        index="{{2}}" 
        title="第三步"
        uid="steps-5">
        <view slot="desc"> desc slot </view>
        <icon slot="failIcon" class="steps-icon"/>
      </step-item>
      
      <step-item 
        index="{{3}}" 
        title="第四步"
        uid="steps-5">
        <icon slot="icon" type="AAOutline" className="steps-icon"/>
      </step-item>
    </steps>
  </demo-block>
</view>

index.js 的代码示例如下：

Page({
  data: {
    activeIndex: 1,
    failIndex: false,
    showNumberSteps: true,
    direction: 'vertical',
    activeIcon1: 'CheckCircleFill',
    activeIcon2:
      'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ',
  },
  handleNextStep() {
    this.setData({
      activeIndex: this.data.activeIndex + 1,
    });
  },
  handlePreStep() {
    this.setData({
      activeIndex: this.data.activeIndex - 1,
    });
  },
  handleSetFailIndex() {
    this.setData({
      failIndex: !this.data.failIndex,
    });
  },
});

index.acss 的代码示例如下：

.demo-btn-container {
  display: flex;
  justify-content: space-between;
  margin: 20px;
}

.demo-btn {
  width: 47%;
}
.full-btn {
  width: 100%;
}
.steps-icon {
  width: 18px;
  height: 18px;
  font-size: 18px !important;
  background-color: white;
}

index.json 的代码示例如下：

{
  "defaultTitle": "Steps",
  "usingComponents": {
    "steps": "antd-mini/es/Steps/index",
    "step-item": "antd-mini/es/Steps/StepItem/index",
    "icon": "antd-mini/es/Icon/index",
    "button": "antd-mini/es/Button/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}