Steps 步骤条

使用指南

Page({
  data: {
    steps1: [
      {
        text: "步骤一",
        desc: "描述信息",
      },
      {
        text: "步骤二",
        desc: "描述信息",
      },
      {
        text: "步骤三",
        desc: "描述信息",
      },
      {
        text: "步骤四",
        desc: "描述信息",
      },
      {
        text: "步骤五",
        desc: "描述信息",
      },
    ],
    active1: 0,
    steps2: [
      {
        text: "步骤一",
      },
      {
        text: "步骤二",
      },
      {
        text: "步骤三",
      },
      {
        text: "步骤四",
      },
    ],
    active2: 0,
    active3: 0,
  },

  onClick(event) {
    const { steps, key } = event.currentTarget.dataset;
    // @ts-ignore
    let index = this.data[key] + 1;
    // @ts-ignore
    const list = this.data[steps];
    if (index >= list.length) {
      index = 0;
    }
    this.setData({
      [key]: index,
    });
  },
  onChange(e) {
    console.log(e.detail);
  },
});

<view class="container">
  <view>
    基础用法
    <tms-steps steps="{{ steps1 }}" active="{{ active1 }}" />
    <button data-steps="steps1" data-key="active1" bind:tap="onClick">
      下一步
    </button>
  </view>

  <view>
    自定义样式
    <tms-steps
      steps="{{ steps2 }}"
      active="{{ active2 }}"
      active-color="#38f"
      active-icon="correct"
    />
    <button data-steps="steps2" data-key="active2" bind:tap="onClick">
      下一步
    </button>
  </view>

  <view>
    竖向步骤条
    <tms-steps
      steps="{{ steps1 }}"
      active="{{ active3 }}"
      direction="vertical"
    />
    <button data-steps="steps1" data-key="active3" bind:tap="onClick">
      下一步
    </button>
  </view>

  <view>
    可点击的
    <tms-steps
      click
      steps="{{ steps1 }}"
      active="{{ active3 }}"
      direction="vertical"
      bind:change="onChange"
    />
  </view>
</view>

API

参数	说明	类型	可选值	默认值
steps	步骤	Array:[{text:string,desc:string}]	—	—
click	可点击的 ｜ Boolean	-	false
active	当前步骤	Number	—	0
direction	显示方向	String	horizontal, vertical	horizontal
active-color	激活状态颜色	String	—	—
inactive-color	未激活状态颜色	String	—	—
active-icon	激活状态底部图标	String	—	round-active
inactive-icon	未激活状态底部图标	String	—	—

EVENTS

事件名	说明	类型	版本
bind:change	可点击状态点击后触发	{ index: 点击位置处于步骤中的索引 }	-

外部样式类

类名	说明
custom-class	根节点样式类
step-class	步骤项样式类
message-class	文本样式类
circle-class	图标样式类
line-class	线条样式类