文档

步骤条(Steps)

更新时间:

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

属性

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"
  }
}