1# stepper<a name="ZH-CN_TOPIC_0000001163812214"></a> 2 3步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。 4 5> **说明：** 6>从API Version 5 开始支持。 7 8## 权限列表<a name="zh-cn_topic_0000001173324583_section11257113618419"></a> 9 10无 11 12## 子组件<a name="zh-cn_topic_0000001173324583_section9288143101012"></a> 13 14仅支持<stepper-item\>子组件。 15 16> **说明：** 17>步骤导航器内的步骤顺序按照子组件<stepper-item\>的顺序进行排序。 18 19## 属性<a name="zh-cn_topic_0000001173324583_section191521418142311"></a> 20 21除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 22 23<a name="zh-cn_topic_0000001173324583_table20633101642315"></a> 24<table><thead align="left"><tr id="zh-cn_topic_0000001173324583_row663331618238"><th class="cellrowborder" valign="top" width="25.040000000000003%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001173324583_a45273e2103004ff3bdd3375013e96a2a"><a name="zh-cn_topic_0000001173324583_a45273e2103004ff3bdd3375013e96a2a"></a><a name="zh-cn_topic_0000001173324583_a45273e2103004ff3bdd3375013e96a2a"></a>名称</p> 25</th> 26<th class="cellrowborder" valign="top" width="25.11%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001173324583_ad5b10d4a60e44bb4a8bbb3b4416d7b27"><a name="zh-cn_topic_0000001173324583_ad5b10d4a60e44bb4a8bbb3b4416d7b27"></a><a name="zh-cn_topic_0000001173324583_ad5b10d4a60e44bb4a8bbb3b4416d7b27"></a>类型</p> 27</th> 28<th class="cellrowborder" valign="top" width="11.18%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001173324583_ab2ae3d9f60d6475ab95ba095851a9d07"><a name="zh-cn_topic_0000001173324583_ab2ae3d9f60d6475ab95ba095851a9d07"></a><a name="zh-cn_topic_0000001173324583_ab2ae3d9f60d6475ab95ba095851a9d07"></a>默认值</p> 29</th> 30<th class="cellrowborder" valign="top" width="38.67%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001173324583_af5c3b773ed0a42e589819a6c8d257ca1"><a name="zh-cn_topic_0000001173324583_af5c3b773ed0a42e589819a6c8d257ca1"></a><a name="zh-cn_topic_0000001173324583_af5c3b773ed0a42e589819a6c8d257ca1"></a>描述</p> 31</th> 32</tr> 33</thead> 34<tbody><tr id="zh-cn_topic_0000001173324583_row9173122818343"><td class="cellrowborder" valign="top" width="25.040000000000003%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001173324583_p1517410284349"><a name="zh-cn_topic_0000001173324583_p1517410284349"></a><a name="zh-cn_topic_0000001173324583_p1517410284349"></a>index</p> 35</td> 36<td class="cellrowborder" valign="top" width="25.11%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001173324583_p1174172823415"><a name="zh-cn_topic_0000001173324583_p1174172823415"></a><a name="zh-cn_topic_0000001173324583_p1174172823415"></a>number</p> 37</td> 38<td class="cellrowborder" valign="top" width="11.18%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001173324583_p19174112863417"><a name="zh-cn_topic_0000001173324583_p19174112863417"></a><a name="zh-cn_topic_0000001173324583_p19174112863417"></a>-</p> 39</td> 40<td class="cellrowborder" valign="top" width="38.67%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001173324583_p7174328203414"><a name="zh-cn_topic_0000001173324583_p7174328203414"></a><a name="zh-cn_topic_0000001173324583_p7174328203414"></a>设置步骤导航器步骤显示第几个stepper-item子组件。</p> 41</td> 42</tr> 43</tbody> 44</table> 45 46## 样式<a name="zh-cn_topic_0000001173324583_section72591594253"></a> 47 48支持[通用样式](js-components-common-styles.md)。 49 50> **说明：** 51>stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。 52 53## 事件<a name="zh-cn_topic_0000001173324583_section69611614182911"></a> 54 55除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 56 57<a name="zh-cn_topic_0000001173324583_table836435619510"></a> 58<table><thead align="left"><tr id="zh-cn_topic_0000001173324583_row153658563517"><th class="cellrowborder" valign="top" width="10.481048104810482%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173324583_a0ff86a4560fa46bfbeb711d109869422"><a name="zh-cn_topic_0000001173324583_a0ff86a4560fa46bfbeb711d109869422"></a><a name="zh-cn_topic_0000001173324583_a0ff86a4560fa46bfbeb711d109869422"></a>名称</p> 59</th> 60<th class="cellrowborder" valign="top" width="41.91419141914191%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173324583_a4c85eb8ca18b4169a25c4a9263fa63ed"><a name="zh-cn_topic_0000001173324583_a4c85eb8ca18b4169a25c4a9263fa63ed"></a><a name="zh-cn_topic_0000001173324583_a4c85eb8ca18b4169a25c4a9263fa63ed"></a>参数</p> 61</th> 62<th class="cellrowborder" valign="top" width="47.6047604760476%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173324583_ab30b2353efa245fbad4d2aaa2ee33def"><a name="zh-cn_topic_0000001173324583_ab30b2353efa245fbad4d2aaa2ee33def"></a><a name="zh-cn_topic_0000001173324583_ab30b2353efa245fbad4d2aaa2ee33def"></a>描述</p> 63</th> 64</tr> 65</thead> 66<tbody><tr id="zh-cn_topic_0000001173324583_row990553521718"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324583_p1390619353170"><a name="zh-cn_topic_0000001173324583_p1390619353170"></a><a name="zh-cn_topic_0000001173324583_p1390619353170"></a>finish</p> 67</td> 68<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324583_p7906113541716"><a name="zh-cn_topic_0000001173324583_p7906113541716"></a><a name="zh-cn_topic_0000001173324583_p7906113541716"></a>无</p> 69</td> 70<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324583_p7906113531711"><a name="zh-cn_topic_0000001173324583_p7906113531711"></a><a name="zh-cn_topic_0000001173324583_p7906113531711"></a>当步骤导航器最后一个步骤完成时触发该事件。</p> 71</td> 72</tr> 73<tr id="zh-cn_topic_0000001173324583_row24211338161718"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324583_p2421113881715"><a name="zh-cn_topic_0000001173324583_p2421113881715"></a><a name="zh-cn_topic_0000001173324583_p2421113881715"></a>skip</p> 74</td> 75<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324583_p16421133841719"><a name="zh-cn_topic_0000001173324583_p16421133841719"></a><a name="zh-cn_topic_0000001173324583_p16421133841719"></a>无</p> 76</td> 77<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324583_p1342113381171"><a name="zh-cn_topic_0000001173324583_p1342113381171"></a><a name="zh-cn_topic_0000001173324583_p1342113381171"></a>当通过setNextButtonStatus方法设置当前步骤导航器可跳过时，点击右侧跳过按钮触发该事件。</p> 78</td> 79</tr> 80<tr id="zh-cn_topic_0000001173324583_row153591438186"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324583_p163591032182"><a name="zh-cn_topic_0000001173324583_p163591032182"></a><a name="zh-cn_topic_0000001173324583_p163591032182"></a>change</p> 81</td> 82<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324583_p1535910381819"><a name="zh-cn_topic_0000001173324583_p1535910381819"></a><a name="zh-cn_topic_0000001173324583_p1535910381819"></a>{ prevIndex：prevIndex, index: index}</p> 83</td> 84<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324583_p113602034189"><a name="zh-cn_topic_0000001173324583_p113602034189"></a><a name="zh-cn_topic_0000001173324583_p113602034189"></a>当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。</p> 85</td> 86</tr> 87<tr id="zh-cn_topic_0000001173324583_row6686131145112"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324583_p126879113514"><a name="zh-cn_topic_0000001173324583_p126879113514"></a><a name="zh-cn_topic_0000001173324583_p126879113514"></a>next</p> 88</td> 89<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324583_p06871911115113"><a name="zh-cn_topic_0000001173324583_p06871911115113"></a><a name="zh-cn_topic_0000001173324583_p06871911115113"></a>{ index：index, pendingIndex: pendingIndex }</p> 90</td> 91<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324583_p18140235202411"><a name="zh-cn_topic_0000001173324583_p18140235202411"></a><a name="zh-cn_topic_0000001173324583_p18140235202411"></a>当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。</p> 92</td> 93</tr> 94<tr id="zh-cn_topic_0000001173324583_row914118186514"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324583_p1414151817510"><a name="zh-cn_topic_0000001173324583_p1414151817510"></a><a name="zh-cn_topic_0000001173324583_p1414151817510"></a>back</p> 95</td> 96<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324583_p16910122113429"><a name="zh-cn_topic_0000001173324583_p16910122113429"></a><a name="zh-cn_topic_0000001173324583_p16910122113429"></a>{ index：index, pendingIndex: pendingIndex }</p> 97</td> 98<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324583_p714261895119"><a name="zh-cn_topic_0000001173324583_p714261895119"></a><a name="zh-cn_topic_0000001173324583_p714261895119"></a>当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为Object：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。</p> 99</td> 100</tr> 101</tbody> 102</table> 103 104## 方法<a name="zh-cn_topic_0000001173324583_section1954212182148"></a> 105 106除支持[通用方法](js-components-common-methods.md)外，支持如下方法： 107 108<a name="zh-cn_topic_0000001173324583_table12793153991411"></a> 109<table><thead align="left"><tr id="zh-cn_topic_0000001173324583_row15793239141412"><th class="cellrowborder" valign="top" width="19.561956195619562%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173324583_p9794143915141"><a name="zh-cn_topic_0000001173324583_p9794143915141"></a><a name="zh-cn_topic_0000001173324583_p9794143915141"></a>名称</p> 110</th> 111<th class="cellrowborder" valign="top" width="24.102410241024103%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173324583_p107942395147"><a name="zh-cn_topic_0000001173324583_p107942395147"></a><a name="zh-cn_topic_0000001173324583_p107942395147"></a>参数</p> 112</th> 113<th class="cellrowborder" valign="top" width="56.33563356335634%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173324583_p11794133913143"><a name="zh-cn_topic_0000001173324583_p11794133913143"></a><a name="zh-cn_topic_0000001173324583_p11794133913143"></a>描述</p> 114</th> 115</tr> 116</thead> 117<tbody><tr id="zh-cn_topic_0000001173324583_row157940399145"><td class="cellrowborder" valign="top" width="19.561956195619562%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324583_p1479453913144"><a name="zh-cn_topic_0000001173324583_p1479453913144"></a><a name="zh-cn_topic_0000001173324583_p1479453913144"></a>setNextButtonStatus</p> 118</td> 119<td class="cellrowborder" valign="top" width="24.102410241024103%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324583_p10794163914147"><a name="zh-cn_topic_0000001173324583_p10794163914147"></a><a name="zh-cn_topic_0000001173324583_p10794163914147"></a>{ status: string, label: label }</p> 120</td> 121<td class="cellrowborder" valign="top" width="56.33563356335634%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324583_p12794143917141"><a name="zh-cn_topic_0000001173324583_p12794143917141"></a><a name="zh-cn_topic_0000001173324583_p12794143917141"></a>设置当前步骤导航器下一步文本按钮的状态，参数中status类型为string，可选值为：</p> 122<a name="zh-cn_topic_0000001173324583_ol12242138121713"></a><a name="zh-cn_topic_0000001173324583_ol12242138121713"></a><ol id="zh-cn_topic_0000001173324583_ol12242138121713"><li>normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；</li><li>disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；</li><li>waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。</li><li>skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。</li></ol> 123</td> 124</tr> 125</tbody> 126</table> 127 128## 示例<a name="zh-cn_topic_0000001173324583_section15374183712313"></a> 129 130``` 131<!-- xxx.hml --> 132<div class = "container"> 133 <stepper class="stepper" id="mystepper" index="0" onnext="nextclick" onback="backclick"> 134 <stepper-item class ="stepperItem" label="{{label_1}}"> 135 <div class = "stepperItemContent" > 136 <text class = "text">First screen</text> 137 </div> 138 <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> 139 </stepper-item> 140 <stepper-item class ="stepperItem" label="{{label_2}}"> 141 <div class = "stepperItemContent" > 142 <text class = "text">Second screen</text> 143 </div> 144 <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> 145 </stepper-item> 146 <stepper-item class ="stepperItem" label="{{label_3}}"> 147 <div class = "stepperItemContent" > 148 <text class = "text">Third screen</text> 149 </div> 150 <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> 151 </stepper-item> 152 </stepper> 153</div> 154``` 155 156``` 157/* xxx.css */ 158.container { 159 margin-top: 20px; 160 flex-direction: column; 161 align-items: center; 162 height: 300px; 163} 164.stepperItem { 165 flex-direction: column; 166 align-items: center; 167} 168.stepperItemContent { 169 color: #0000ff; 170 font-size: 50px; 171 justify-content: center; 172} 173.button { 174 width: 60%; 175 margin-top: 30px; 176 justify-content: center; 177} 178``` 179 180``` 181// xxx.js 182export default { 183 data: { 184 label_1: 185 { 186 prevLabel: 'BACK', 187 nextLabel: 'NEXT', 188 status: 'normal' 189 }, 190 label_2: 191 { 192 prevLabel: 'BACK', 193 nextLabel: 'NEXT', 194 status: 'normal' 195 }, 196 label_3: 197 { 198 prevLabel: 'BACK', 199 nextLabel: 'NEXT', 200 status: 'normal' 201 }, 202 }, 203 setRightButton(e) { 204 this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'}); 205 }, 206 nextclick(e) { 207 var index = { 208 pendingIndex: e.pendingIndex 209 } 210 return index; 211 }, 212 backclick(e) { 213 var index = { 214 pendingIndex: e.pendingIndex 215 } 216 return index; 217 }, 218} 219``` 220 221 222 223
