Steps 步骤条

使用指南

在 app.wxss 中引入组件库所有样式

  1. @import "path/to/zanui-weapp/dist/index.wxss";

在 index.json 中引入组件

  1. {
  2.   "usingComponents": {
  3.     "zan-steps": "path/to/zanui-weapp/dist/steps/index"
  4.   }
  5. }
  7. ### 代码演示
  8. 在模板中使用 zan-steps 模板，并传入相应数据
  9. ```html
  10. <zan-steps type="horizon" steps="{{steps}}"></zan-steps>
参数 说明 类型 默认值 必须
type steps 的展示状态，可选值为 'horizon', 'vertical' String horizon
hasDesc 是否展示描述 Boolean false
steps 步骤条展示数据 Array 必须
className 自定义类目，方便自定义显示 String

steps 数据格式如下：

  1. [
  2.   {
  3.     // 此步骤是否当前完成状态
  4.     current: false,
  5.     // 此步骤是否已经完成
  6.     done: true,
  7.     // 此步骤显示文案
  8.     text: '步骤一',
  9.     // 此步骤描述语
  10.     desc: '10.01'
  11.   },
  12.   {
  13.     done: true,
  14.     current: false,
  15.     text: '步骤二',
  16.     desc: '10.02'
  17.   },
  18.   {
  19.     done: true,
  20.     current: true,
  21.     text: '步骤三',
  22.     desc: '10.03'
  23.   }
  24. ]

Steps 步骤条 - 图1
微信扫一扫

原文:

https://www.youzanyun.com/zanui/weapp#/zanui/view/steps