Steps 步骤条

显示一个任务的进度；或者引导用户完成某个复杂任务。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Steps",
  3.     "usingComponents": {
  4.         "wux-steps": "../../dist/steps/index",
  5.         "wux-step": "../../dist/step/index"
  6.     }
  7. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Steps</view>
  4.         <view class="page__desc">步骤条</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <view class="sub-title">Default</view>
  8.         <wux-steps>
  9.             <wux-step status="finish" title="Finished" content="This is description"></wux-step>
  10.             <wux-step status="process" title="In Progress" content="This is description"></wux-step>
  11.             <wux-step status="wait" title="Waiting" content="This is description"></wux-step>
  12.         </wux-steps>
  13.         <view class="sub-title">Direction = vertical</view>
  14.         <wux-steps direction="vertical">
  15.             <wux-step status="finish" title="Finished" content="This is description"></wux-step>
  16.             <wux-step status="process" title="In Progress" content="This is description"></wux-step>
  17.             <wux-step status="error" title="Error" content="This is description"></wux-step>
  18.         </wux-steps>
  19.         <view class="sub-title">Current</view>
  20.         <wux-steps current="{{ current }}">
  21.             <wux-step title="First"></wux-step>
  22.             <wux-step title="Second"></wux-step>
  23.             <wux-step title="Third"></wux-step>
  24.         </wux-steps>
  25.         <view class="button-sp-area">
  26.             <button type="default" bindtap="onClick">Next step</button>
  27.         </view>
  28.     </view>
  29. </view>
  1. Page({
  2.     data: {
  3.         current: 1,
  4.     },
  5.     onClick() {
  6.         const current = this.data.current + 1 > 2 ? 0 : this.data.current + 1
  8.         this.setData({
  9.             current,
  10.         })
  11.     },
  12. })

视频演示

Steps

API

Steps props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-steps
current number 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态 0
direction string step 样式，可选值为 vertical、horizontal horizontal

Steps externalClasses

名称 描述
wux-class 根节点样式类

Step props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-step
status string 指定状态，可选值为 wait、process、finish、error。当不配置该属性时，会使用 Steps 的 current 来自动指定状态 -
title string 标题 -
content string 步骤的详情描述 -
icon string 步骤图标 -

Step slot

名称 描述
title 自定义标题
content 自定义描述

Step externalClasses

名称 描述
wux-class 根节点样式类