• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# stepper开发指导
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @mayaolll-->
5<!--Designer: @jiangdayuan-->
6<!--Tester: @lxl007-->
7<!--Adviser: @HelloCrease-->
8
9当一个任务需要多个步骤时，可以使用stepper组件展示当前进展。具体用法请参考[stepper API](../reference/apis-arkui/arkui-js/js-components-container-stepper.md)。
10
11
12## 创建stepper组件
13
14在pages/index目录下的hml文件中创建一个stepper组件。
15
16```html
17<!-- xxx.hml -->
18<div class="container">
19 <stepper>
20   <stepper-item>
21     <text>Step 1</text>
22   </stepper-item>
23   <stepper-item>
24     <text>Step 2</text>
25   </stepper-item>
26 </stepper>
27</div>
28```
29
30```css
31/* xxx.css */
32.container {
33  width:100%;
34  height:100%;
35  flex-direction: column;
36  justify-content: center;
37  align-items: center;
38  background-color: #F1F3F5;
39}
40text{
41  width: 100%;
42  height: 100%;
43  text-align: center;
44}
45```
46
47![zh-cn_image_0000001234289455](figures/zh-cn_image_0000001234289455.gif)
48
49
50## 设置index属性
51
52页面默认显示索引值为index的步骤。
53
54```html
55<!-- xxx.hml -->
56<div class="container">
57 <stepper index="2">
58   <stepper-item>
59     <text>stepper-item1</text>
60   </stepper-item>
61   <stepper-item>
62     <text>stepper-item2</text>
63   </stepper-item>
64   <stepper-item>
65     <text>stepper-item3</text>
66   </stepper-item>
67  </stepper>
68</div>
69```
70
71```css
72/* xxx.css */
73.container {
74  width:100%;
75  height:100%;
76  flex-direction: column;
77  background-color: #F1F3F5;
78}
79text{
80  width: 100%;
81  height: 100%;
82  text-align: center;
83}
84```
85
86![zh-cn_image_0000001234011019](figures/zh-cn_image_0000001234011019.gif)
87
88通过设置label属性，自定义stepper-item的提示按钮。
89
90```html
91<!-- xxx.hml -->
92<div class="container">
93 <stepper index="1">
94   <stepper-item label="{{label_1}}">
95     <text>stepper-item1</text>
96   </stepper-item>
97   <stepper-item label="{{label_2}}">
98     <text>stepper-item2</text>
99   </stepper-item>
100   <stepper-item label="{{label_3}}">
101     <text>stepper-item3</text>
102   </stepper-item>
103   <stepper-item>
104     <text>stepper-item4</text>
105   </stepper-item>
106 </stepper>
107</div>
108```
109
110```css
111/* xxx.css */
112.container {
113  width:100%;
114  height:100%;
115  flex-direction: column;
116  background-color: #F1F3F5;
117}
118text{
119  width: 100%;
120  height: 100%;
121  text-align: center;
122}
123```
124
125```js
126// xxx.js
127export default {
128  data: {
129    label_1:{
130      nextLabel: 'NEXT',
131      status: 'normal'
132    },
133    label_2:{
134      prevLabel: 'BACK',
135      nextLabel: 'NEXT',
136      status: 'normal'
137    },
138    label_3:{
139      prevLabel: 'BACK',
140      nextLabel: 'END',
141      status: 'disabled'
142    },
143  },
144}
145```
146
147![zh-cn_image_0000001163531210](figures/zh-cn_image_0000001163531210.gif)
148
149
150## 设置样式
151
152stepper组件默认填充父容器，通过border和background-color设置边框、背景色。
153```html
154<!-- xxx.hml -->
155<div class="container" >
156  <div class="stepperContent">
157    <stepper class="stepperClass">
158      <stepper-item>
159        <text>stepper-item1</text>
160      </stepper-item>
161    </stepper>
162  </div>
163</div>
164```
165
166```css
167/* xxx.css */
168.container {
169  width:100%;
170  height:100%;
171  flex-direction: column;
172  align-items: center;
173  justify-content: center;
174  background-color:#F1F3F5;
175}
176.stepperContent{
177  width: 300px;
178  height: 300px;
179}
180.stepperClass{
181  border:1px solid silver ;
182  background-color: white;
183}
184text{
185  width: 100%;
186  height: 100%;
187  text-align: center;
188}
189```
190
191![zh-cn_image_0000001234130975](figures/zh-cn_image_0000001234130975.png)
192
193
194## 添加事件
195
196stepper分别添加finish，change，next，back，skip事件。
197
198- 当change与next或back同时存在时，会先执行next或back事件再去执行change事件。
199
200- 重新设置index属性值时要先清除index的值再重新设置，否则检测不到值的改变。
201
202```html
203<!-- xxx.hml -->
204<div class="container"  style="background-color:#F1F3F5;">
205  <div >
206    <stepper onfinish="stepperFinish" onchange="stepperChange" onnext="stepperNext" onback="stepperBack" onskip="stepperSkip" id="stepperId" index="{{index}}">
207      <stepper-item>
208        <text>stepper-item1</text>
209        <button value="skip" onclick="skipClick"></button>
210      </stepper-item>
211      <stepper-item>
212         <text>stepper-item2</text>
213         <button value="skip" onclick="skipClick"></button>
214      </stepper-item>
215      <stepper-item>
216        <text>stepper-item3</text>
217      </stepper-item>
218    </stepper>
219  </div>
220</div>
221```
222
223```css
224/* xxx.css */
225.doc-page {
226  width:100%;
227  height:100%;
228  flex-direction: column;
229  align-items: center;
230  justify-content: center;
231}
232stepper-item{
233  width: 100%;
234  flex-direction: column;
235  align-self: center;
236  justify-content: center;
237}
238text{
239  margin-top: 45%;
240  justify-content: center;
241  align-self: center;
242  margin-bottom: 50px;
243}
244button{
245  width: 80%;
246  height: 60px;
247  margin-top: 20px;
248}
249```
250
251```js
252// xxx.js
253import promptAction from '@ohos.promptAction';
254export default {
255  data: {
256    index:0,
257  },
258   stepperSkip(){
259    this.index=2;
260  },
261   skipClick(){
262    this.$element('stepperId').setNextButtonStatus({status: 'skip', label: 'SKIP'});
263  },
264  stepperFinish(){
265    promptAction.showToast({
266      message: 'All Finished'
267    })
268  },
269  stepperChange(e){
270    console.log("stepperChange"+e.index)
271    promptAction.showToast({
272      // index表示当前步骤的序号
273      message: 'Previous step: '+e.prevIndex+"-------Current step:"+e.index
274    })
275  },
276  stepperNext(e){
277    console.log("stepperNext"+e.index)
278    promptAction.showToast({
279      // pendingIndex表示将要跳转的序号
280      message: 'Current step:'+e.index+"-------Next step:"+e.pendingIndex
281    })
282    var index = {pendingIndex:e.pendingIndex }
283    return index;
284  },
285  stepperBack(e){
286    console.log("stepperBack"+e.index)
287    var index = {pendingIndex: e.pendingIndex }
288    return index;
289  }
290}
291```
292
293![zh-cn_image_0000001189089950](figures/zh-cn_image_0000001189089950.gif)