Steps 步骤条

概述

拆分某项流程的步骤，引导用户按流程完成任务。

使用指南

在 .json 中引入组件

  1. "usingComponents": {
  2.     "i-steps": "../../dist/steps/index",
  3.     "i-step": "../../dist/step/index"
  4. }

示例

  1. 基本用法
  3. <i-steps>
  4.     <i-step status="finish">
  5.         <view slot="title">
  6.               已完成
  7.         </view>
  8.         <view slot="content">
  9.             这里是该步骤的描述信息
  10.         </view>
  11.     </i-step>
  12.     <i-step status="process">
  13.         <view slot="title">
  14.             进行中
  15.         </view>
  16.         <view slot="content">
  17.             这里是该步骤的描述信息
  18.         </view>
  19.     </i-step>
  20.     <i-step status="">
  21.         <view slot="title">
  22.             错误
  23.         </view>
  24.         <view slot="content">
  25.             这里是该步骤的描述信息
  26.         </view>
  27.     </i-step>
  28. </i-steps>
  30. 使用 icon 图标
  32. <i-steps>
  33.     <i-step status="finish" icon="barrage">
  34.         <view slot="title">
  35.               已完成
  36.         </view>
  37.         <view slot="content">
  38.             这里是该步骤的描述信息
  39.         </view>
  40.     </i-step>
  41.     <i-step status="process" icon="brush">
  42.         <view slot="title">
  43.             进行中
  44.         </view>
  45.         <view slot="content" icon="camera">
  46.             这里是该步骤的描述信息
  47.         </view>
  48.     </i-step>
  49.     <i-step  icon="collection">
  50.         <view slot="title">
  51.             错误
  52.         </view>
  53.         <view slot="content">
  54.             这里是该步骤的描述信息
  55.         </view>
  56.     </i-step>
  57. </i-steps>
  59. 步骤进度
  61. <i-steps current="{{current}}">
  62.     <i-step>
  63.         <view slot="title">
  64.               已完成
  65.         </view>
  66.         <view slot="content">
  67.             这里是该步骤的描述信息
  68.         </view>
  69.     </i-step>
  70.     <i-step>
  71.         <view slot="title">
  72.             进行中
  73.         </view>
  74.         <view slot="content">
  75.             这里是该步骤的描述信息
  76.         </view>
  77.     </i-step>
  78.     <i-step>
  79.         <view slot="title">
  80.             错误
  81.         </view>
  82.         <view slot="content">
  83.             这里是该步骤的描述信息
  84.         </view>
  85.     </i-step>
  86. </i-steps>
  87. <i-button bindclick="handleClick">下一步</i-button>
  89. 垂直方向
  91. <i-steps current="{{verticalCurrent}}" direction="vertical">
  92.     <i-step>
  93.         <view slot="title">
  94.               已完成
  95.         </view>
  96.         <view slot="content">
  97.             这里是该步骤的描述信息
  98.         </view>
  99.     </i-step>
  100.     <i-step>
  101.         <view slot="title">
  102.             进行中
  103.         </view>
  104.         <view slot="content">
  105.             这里是该步骤的描述信息
  106.         </view>
  107.     </i-step>
  108.     <i-step>
  109.         <view slot="title">
  110.             错误
  111.         </view>
  112.         <view slot="content">
  113.             这里是该步骤的描述信息
  114.         </view>
  115.     </i-step>
  116. </i-steps>
  1. Page({
  2.     data : {
  3.         current : 2,
  4.         verticalCurrent : 2
  5.     },
  6.     handleClick () {
  7.         const addCurrent = this.data.current + 1;
  8.         const current = addCurrent > 2 ? 0 : addCurrent;
  9.         this.setData({
  10.             'current' : current
  11.         })
  12.     }
  13. });

API

Steps properties

属性说明类型默认值
i-class自定义 class 类名String-
current当前步骤，从 0 开始计数Number-1
status当前步骤的状态，可选值为 wait、process、finish、errorString-
direction步骤条的方向，可选值为 horizontal（水平）或 vertical（垂直）Stringhorizontal

Step properties

属性说明类型默认值
i-class自定义 class 类名String-
status步骤的状态，可选值为 wait、process、finish、error，不设置时自动判断String-
title标题String-
content步骤的详细描述，可选String-
icon步骤的图标，可选String-