detailSkeleton.ets
1.45 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/**
* 详情骨架屏
*/
@Entry
@Component
export struct detailedSkeleton {
@State quantity: Array<number> = [1, 2, 3, 4, 5, 6, 7]
build() {
Row() {
Column() {
Column() {
textArea('100%', 20)
textArea('50%', 20)
}
.SkeletonStyle()
.alignItems(HorizontalAlign.Start)
Column() {
textArea('30%', 12)
textArea('30%', 12)
}
.SkeletonStyle()
.alignItems(HorizontalAlign.Start)
Column() {
textArea('100%', 12)
textArea('100%', 12)
textArea('90%', 12)
}
.SkeletonStyle()
.alignItems(HorizontalAlign.Start)
Column() {
textArea('100%', 180)
}
.justifyContent(FlexAlign.SpaceBetween)
.SkeletonStyle()
ForEach(this.quantity, () => {
Column() {
textArea('100%', 12)
textArea('90%', 12)
}
.SkeletonStyle()
.alignItems(HorizontalAlign.Start)
})
}
.width('100%')
}
.height('100%')
}
}
@Builder
function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
Row()
.width(width)
.height(height)
.backgroundColor('#FFF5F5F5')
.margin({ top: 10 })
// .borderRadius(5)
}
// 全局公共样式
@Styles
function SkeletonStyle() {
.padding({ right: 18, left: 18 })
.width('100%')
.margin({ top: 10 })
}