## **基本用法**
#### 示例
:-: 
#### **xxx.wxml**
```
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">步骤条</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="cuIcon-title text-orange"></text> 基本用法
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="basicsSteps">下一步</button>
</view>
</view>
<view class="bg-white padding">
<view class="cu-steps">
<view class="cu-item {{index>basics?'':'text-red'}}" wx:for="{{basicsList}}" wx:key>
<text class="cuIcon-{{item.icon}}"></text> {{item.name}}
</view>
</view>
</view>
<view class="bg-white padding margin-top-xs">
<view class="cu-steps">
<view class="cu-item {{index>basics?'':'text-orange'}}" wx:for="{{basicsList}}" wx:key>
<text class="cuIcon-{{index>basics?'title':item.icon}}"></text> {{item.name}}
</view>
</view>
</view>
<view class="bg-white padding margin-top-xs">
<view class="cu-steps steps-arrow">
<view class="cu-item {{index>basics?'':'text-blue'}}" wx:for="{{basicsList}}" wx:key>
<text class="cuIcon-{{item.icon}}"></text> {{item.name}}
</view>
</view>
</view>
```
#### **xxx.wxss**
```
.steps-bottom.cu-steps .cu-item .num::before {
content: "\e668";
font-family: 'iconfont';
}
```
#### **xxx.JS**
```
Page({
data: {
basicsList: [{
icon: 'usefullfill',
name: '开始'
}, {
icon: 'radioboxfill',
name: '等待'
}, {
icon: 'roundclosefill',
name: '错误'
}, {
icon: 'roundcheckfill',
name: '完成'
}, ],
basics: 0,
numList: [{
name: '开始'
}, {
name: '等待'
}, {
name: '错误'
}, {
name: '完成'
}, ],
num: 0,
scroll: 0
},
basicsSteps() {
this.setData({
basics: this.data.basics == this.data.basicsList.length - 1 ? 0 : this.data.basics + 1
})
},
numSteps() {
this.setData({
num: this.data.num == this.data.numList.length - 1 ? 0 : this.data.num + 1
})
},
scrollSteps() {
this.setData({
scroll: this.data.scroll == 9 ? 0 : this.data.scroll + 1
})
}
})
```
## **数字完成**
#### 示例
:-: 
#### **xxx.wxml**
```
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="cuIcon-title text-orange"></text> 数字完成
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="numSteps">下一步</button>
</view>
</view>
<view class="bg-white padding">
<view class="cu-steps">
<view class="cu-item {{index>num?'':'text-blue'}}" wx:for="{{numList}}" wx:key>
<text class="num {{index==2?'err':''}}" data-index="{{index + 1}}"></text> {{item.name}}
</view>
</view>
</view>
```
## **多级显示**
#### 示例
:-: 
#### **xxx.wxml**
```
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="cuIcon-title text-orange"></text> 多级显示
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="scrollSteps">下一步</button>
</view>
</view>
<scroll-view scroll-x class="bg-white padding response cu-steps steps-bottom" scroll-into-view="scroll-{{scroll}}" scroll-with-animation>
<view class="cu-item {{index>scroll?'':'text-blue'}} padding-lr-xl" wx:for="{{10}}" wx:key id="scroll-{{index}}">
Level {{index + 1}} <text class="num" data-index="{{index + 1}}"></text>
</view>
</scroll-view>
```
