Steps 步骤条

使用指南

在 app.json 或 index.json 中引入组件

  1. "usingComponents": {
  2.   "van-steps": "path/to/vant-weapp/dist/steps/index"
  3. }

代码演示

基础用法

  1. <van-steps
  2.   steps="{{ steps }}"
  3.   active="{{ active }}"
  4. />
  1. Page({
  2.   data: {
  3.     steps: [
  4.       {
  5.         text: '步骤一',
  6.         desc: '描述信息'
  7.       },
  8.       {
  9.         text: '步骤二',
  10.         desc: '描述信息'
  11.       },
  12.       {
  13.         text: '步骤三',
  14.         desc: '描述信息'
  15.       },
  16.       {
  17.         text: '步骤四',
  18.         desc: '描述信息'
  19.       }
  20.     ]
  21.   }
  22. });

竖向步骤条

可以通过设置direction属性来改变步骤条的显示方式

  1. <van-steps
  2.   steps="{{ steps }}"
  3.   active="{{ active }}"
  4.   direction="vertical"
  5.   active-color="#f44"
  6. />

Steps API

参数说明类型默认值
active当前步骤Number0
direction显示方向，可选值为 horizontal verticalStringhorizontal
active-color激活状态颜色String#07c160

外部样式类

类名说明
custom-class根节点样式类

更新日志

版本类型内容
0.0.1feature新增组件
0.3.4bugfix修复样式错误的问题

原文: https://youzan.github.io/vant-weapp/#/steps