步骤条 - 图1

步骤选项

静态数据

image.png
数据源
image.png

Step间距

设置间距
image.png

当前步骤的状态

wait、process、finish、error、success
image.png

事件绑定

1、下一步点击后,动态改变状态值

  1. this.getData().then(() => {
  2.   let step = this.getValue('steps')
  4.   step++
  6.   if (step > 2) {
  7.     step = 0
  8.   }
  10.   this.setData({
  11.     steps: step
  12.   })
  13. })

2、区域动态显示隐藏
监听Step进度条onChange值发现变化

  1. const {value} = arguments[0]
  3. if (value == 0) {
  4.   this.hide(['step2', 'step3'])
  5.   this.display(['step1'])
  6. }
  8. if (value == 1) {
  9.   this.hide(['step1', 'step3'])
  10.   this.display(['step2'])
  11. }
  13. if (value == 2) {
  14.   this.hide(['step1', 'step2'])
  15.   this.display(['step3'])
  16. }

区域块还是很重要的，区域块存放的元素组件，整个隐藏显示操作