支付宝

滚动

  1@Entry
  2@Component
  3struct Index {
  4  build() {
  5    RelativeContainer() {
  6      Stack({
  7        alignContent: Alignment.Bottom
  8      }) {
  9        Stack({
 10          alignContent: Alignment.Top
 11        }) {
 12          Row() {
 13            Column() {
 14              Text('北京')
 15                .fontSize(18)
 16                .fontColor(Color.White)
 17              Text('晴 2℃')
 18                .fontSize(12)
 19                .fontColor('#fff')
 20              Text('^')
 21                .position({
 22                  x: 38,
 23                  y: 0
 24                })
 25                .fontSize(18)
 26                .fontColor(Color.White)
 27            }
 28
 29            Row() {
 30              Image($r('app.media.startIcon'))
 31                .width(20)
 32                .margin({
 33                  left: 5,
 34                  right: 5
 35                })
 36              Text('北京交通一卡通')
 37                .layoutWeight(1)
 38
 39              Text('搜索')
 40                .width(55)
 41                .fontColor('#5b73de')
 42                .fontWeight(700)
 43                .textAlign(TextAlign.Center)
 44                .border({
 45                  width: {
 46                    left: 1
 47                  },
 48                  color: '#ccc'
 49                })
 50            }
 51            .height(32)
 52            .layoutWeight(1)
 53            .backgroundColor('#fff')
 54            .borderRadius(5)
 55            .margin({
 56              left: 25,
 57              right: 12
 58            })
 59
 60            Image($r('app.media.startIcon'))
 61              .width(30)
 62          }
 63          .padding({
 64            left: 10,
 65            right: 10
 66          })
 67          .width('100%')
 68          .height(60)
 69          .backgroundColor('#5b73de')
 70          .zIndex(666)
 71
 72          Scroll() {
 73            Column() {
 74              Row() {
 75                Column() {
 76                  Image($r('app.media.startIcon'))
 77                    .width(36)
 78                  Text('扫一扫')
 79                    .fontColor('#fff')
 80                }
 81                .layoutWeight(1)
 82
 83                Column() {
 84                  Image($r('app.media.startIcon'))
 85                    .width(36)
 86                  Text('收付款')
 87                    .fontColor('#fff')
 88                }
 89                .layoutWeight(1)
 90
 91                Column() {
 92                  Image($r('app.media.startIcon'))
 93                    .width(36)
 94                  Text('出行')
 95                    .fontColor('#fff')
 96                }
 97                .layoutWeight(1)
 98
 99                Column() {
100                  Image($r('app.media.startIcon'))
101                    .width(36)
102                  Text('卡包')
103                    .fontColor('#fff')
104                }
105                .layoutWeight(1)
106              }
107              .backgroundColor('#5b73de')
108              .padding({
109                top: 5,
110                bottom: 15
111              })
112
113              Column() {
114                Column({ space: 10 }) {
115                  Row() {
116                    Column() {
117                      Image($r('app.media.startIcon'))
118                        .width(28)
119                        .margin({
120                          bottom: 8
121                        })
122                      Text('滴滴出行')
123                        .fontSize(12)
124                        .fontColor('#666')
125                    }
126                    .layoutWeight(1)
127
128                    Column() {
129                      Image($r('app.media.startIcon'))
130                        .width(28)
131                        .margin({
132                          bottom: 8
133                        })
134                      Text('滴滴出行')
135                        .fontSize(12)
136                        .fontColor('#666')
137                    }
138                    .layoutWeight(1)
139
140                    Column() {
141                      Image($r('app.media.startIcon'))
142                        .width(28)
143                        .margin({
144                          bottom: 8
145                        })
146                      Text('滴滴出行')
147                        .fontSize(12)
148                        .fontColor('#666')
149                    }
150                    .layoutWeight(1)
151
152                    Column() {
153                      Image($r('app.media.startIcon'))
154                        .width(28)
155                        .margin({
156                          bottom: 8
157                        })
158                      Text('滴滴出行')
159                        .fontSize(12)
160                        .fontColor('#666')
161                    }
162                    .layoutWeight(1)
163
164                    Column() {
165                      Image($r('app.media.startIcon'))
166                        .width(28)
167                        .margin({
168                          bottom: 8
169                        })
170                      Text('滴滴出行')
171                        .fontSize(12)
172                        .fontColor('#666')
173                    }
174                    .layoutWeight(1)
175                  }
176
177                  Row() {
178                    Column() {
179                      Image($r('app.media.startIcon'))
180                        .width(28)
181                        .margin({
182                          bottom: 8
183                        })
184                      Text('滴滴出行')
185                        .fontSize(12)
186                        .fontColor('#666')
187                    }
188                    .layoutWeight(1)
189
190                    Column() {
191                      Image($r('app.media.startIcon'))
192                        .width(28)
193                        .margin({
194                          bottom: 8
195                        })
196                      Text('滴滴出行')
197                        .fontSize(12)
198                        .fontColor('#666')
199                    }
200                    .layoutWeight(1)
201
202                    Column() {
203                      Image($r('app.media.startIcon'))
204                        .width(28)
205                        .margin({
206                          bottom: 8
207                        })
208                      Text('滴滴出行')
209                        .fontSize(12)
210                        .fontColor('#666')
211                    }
212                    .layoutWeight(1)
213
214                    Column() {
215                      Image($r('app.media.startIcon'))
216                        .width(28)
217                        .margin({
218                          bottom: 8
219                        })
220                      Text('滴滴出行')
221                        .fontSize(12)
222                        .fontColor('#666')
223                    }
224                    .layoutWeight(1)
225
226                    Column() {
227                      Image($r('app.media.startIcon'))
228                        .width(28)
229                        .margin({
230                          bottom: 8
231                        })
232                      Text('滴滴出行')
233                        .fontSize(12)
234                        .fontColor('#666')
235                    }
236                    .layoutWeight(1)
237                  }
238
239                  Row() {
240                    Column() {
241                      Image($r('app.media.startIcon'))
242                        .width(28)
243                        .margin({
244                          bottom: 8
245                        })
246                      Text('滴滴出行')
247                        .fontSize(12)
248                        .fontColor('#666')
249                    }
250                    .layoutWeight(1)
251
252                    Column() {
253                      Image($r('app.media.startIcon'))
254                        .width(28)
255                        .margin({
256                          bottom: 8
257                        })
258                      Text('滴滴出行')
259                        .fontSize(12)
260                        .fontColor('#666')
261                    }
262                    .layoutWeight(1)
263
264                    Column() {
265                      Image($r('app.media.startIcon'))
266                        .width(28)
267                        .margin({
268                          bottom: 8
269                        })
270                      Text('滴滴出行')
271                        .fontSize(12)
272                        .fontColor('#666')
273                    }
274                    .layoutWeight(1)
275
276                    Column() {
277                      Image($r('app.media.startIcon'))
278                        .width(28)
279                        .margin({
280                          bottom: 8
281                        })
282                      Text('滴滴出行')
283                        .fontSize(12)
284                        .fontColor('#666')
285                    }
286                    .layoutWeight(1)
287
288                    Column() {
289                      Image($r('app.media.startIcon'))
290                        .width(28)
291                        .margin({
292                          bottom: 8
293                        })
294                      Text('滴滴出行')
295                        .fontSize(12)
296                        .fontColor('#666')
297                    }
298                    .layoutWeight(1)
299                  }
300                }
301                .padding(10)
302
303                Row({
304                  space: 5
305                }) {
306                  Image($r('app.media.bird'))
307                    .layoutWeight(1)
308                  Image($r('app.media.bird'))
309                    .layoutWeight(1)
310                  Image($r('app.media.bird'))
311                    .layoutWeight(1)
312                }
313                .padding(10)
314
315                Column({
316                  space: 10
317                }) {
318                  Image($r('app.media.bird'))
319                    .width('100%')
320                    .height(100)
321                  Image($r('app.media.bird'))
322                    .width('100%')
323                    .height(100)
324                }
325                .padding(10)
326              }
327              .width('100%')
328              .backgroundColor('#fff')
329              .borderRadius({
330                topLeft: 10,
331                topRight: 10
332              })
333            }
334            .width('100%')
335            .padding({
336              top: 60,
337              bottom: 60
338            })
339          }
340        }
341        .width('100%')
342        .height('100%')
343
344        Row() {
345          Column() {
346            Image($r('app.media.startIcon'))
347              .width(35)
348          }
349          .layoutWeight(1)
350
351          Column() {
352            Image($r('app.media.startIcon'))
353              .width(28)
354              .margin({
355                bottom: 2
356              })
357            Text('理财')
358              .fontSize(12)
359          }
360          .layoutWeight(1)
361
362          Column() {
363            Image($r('app.media.startIcon'))
364              .width(28)
365              .margin({
366                bottom: 2
367              })
368            Text('生活')
369              .fontSize(12)
370          }
371          .layoutWeight(1)
372
373          Column() {
374            Image($r('app.media.startIcon'))
375              .width(28)
376              .margin({
377                bottom: 2
378              })
379            Text('消息')
380              .fontSize(12)
381          }
382          .layoutWeight(1)
383
384          Column() {
385            Image($r('app.media.startIcon'))
386              .width(28)
387              .margin({
388                bottom: 2
389              })
390            Text('我的')
391              .fontSize(12)
392          }
393          .layoutWeight(1)
394        }
395        .width('100%')
396        .height(60)
397        .backgroundColor('#fbfcfe')
398      }
399      .width('100%')
400      .height('100%')
401      .backgroundColor('#5b73de')
402    }
403  }
404}
@Entry @Component struct Index { build() { RelativeContainer() { Stack({ alignContent: Alignment.Bottom }) { Stack({ alignContent: Alignment.Top }) { Row() { Column() { Text('北京') .fontSize(18) .fontColor(Color.White) Text('晴 2℃') .fontSize(12) .fontColor('#fff') Text('^') .position({ x: 38, y: 0 }) .fontSize(18) .fontColor(Color.White) } Row() { Image($r('app.media.startIcon')) .width(20) .margin({ left: 5, right: 5 }) Text('北京交通一卡通') .layoutWeight(1) Text('搜索') .width(55) .fontColor('#5b73de') .fontWeight(700) .textAlign(TextAlign.Center) .border({ width: { left: 1 }, color: '#ccc' }) } .height(32) .layoutWeight(1) .backgroundColor('#fff') .borderRadius(5) .margin({ left: 25, right: 12 }) Image($r('app.media.startIcon')) .width(30) } .padding({ left: 10, right: 10 }) .width('100%') .height(60) .backgroundColor('#5b73de') .zIndex(666) Scroll() { Column() { Row() { Column() { Image($r('app.media.startIcon')) .width(36) Text('扫一扫') .fontColor('#fff') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(36) Text('收付款') .fontColor('#fff') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(36) Text('出行') .fontColor('#fff') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(36) Text('卡包') .fontColor('#fff') } .layoutWeight(1) } .backgroundColor('#5b73de') .padding({ top: 5, bottom: 15 }) Column() { Column({ space: 10 }) { Row() { Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) } Row() { Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) } Row() { Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 8 }) Text('滴滴出行') .fontSize(12) .fontColor('#666') } .layoutWeight(1) } } .padding(10) Row({ space: 5 }) { Image($r('app.media.bird')) .layoutWeight(1) Image($r('app.media.bird')) .layoutWeight(1) Image($r('app.media.bird')) .layoutWeight(1) } .padding(10) Column({ space: 10 }) { Image($r('app.media.bird')) .width('100%') .height(100) Image($r('app.media.bird')) .width('100%') .height(100) } .padding(10) } .width('100%') .backgroundColor('#fff') .borderRadius({ topLeft: 10, topRight: 10 }) } .width('100%') .padding({ top: 60, bottom: 60 }) } } .width('100%') .height('100%') Row() { Column() { Image($r('app.media.startIcon')) .width(35) } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 2 }) Text('理财') .fontSize(12) } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 2 }) Text('生活') .fontSize(12) } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 2 }) Text('消息') .fontSize(12) } .layoutWeight(1) Column() { Image($r('app.media.startIcon')) .width(28) .margin({ bottom: 2 }) Text('我的') .fontSize(12) } .layoutWeight(1) } .width('100%') .height(60) .backgroundColor('#fbfcfe') } .width('100%') .height('100%') .backgroundColor('#5b73de') } } }

Copyright ©2010-2022 比特日记 All Rights Reserved.

Powered By 可尔物语

浙ICP备11005866号-12