channelSkeleton.ets
1.76 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/**
* 频道骨架屏
*/
@Entry
@Component
export struct channelSkeleton {
@State quantity: Array<number> = [1, 2, 3,]
build() {
Row() {
Column() {
ForEach(this.quantity, () => {
Row() {
Column() {
textArea('60%', 12)
textArea('60%', 12)
textArea('40%', 12)
}
.RightStyle()
Column() {
textArea('35%', 78)
}
.margin({ right: 0 })
}
.height(110)
.justifyContent(FlexAlign.SpaceBetween)
.SkeletonStyle()
})
textArea('40%', 12)
Column() {
textArea('100%', 204)
}
.justifyContent(FlexAlign.SpaceBetween)
.SkeletonStyle()
ForEach([1, 2], () => {
Row() {
Column() {
textArea('60%', 12)
textArea('60%', 12)
textArea('40%', 12)
}
.RightStyle()
Column() {
textArea('35%', 78)
}
.margin({ right: 0 })
}
.height(100)
.justifyContent(FlexAlign.SpaceBetween)
.SkeletonStyle()
})
}
.width('100%')
}
.height('100%')
}
}
@Builder
function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
Row()
.width(width)
.height(height)
.backgroundColor('#FFF2F3F4')
.margin({ top: 10 })
}
// 全局公共样式
@Styles
function SkeletonStyle() {
.padding({ right: 18, left: 18 })
.width('100%')
// .margin({ top: 10 })
}
@Extend(Column)
function RightStyle() {
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.SpaceAround)
.height('100%')
}