developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
douaojie
82b5a35b 1 parent 931b9fe7

feat: 骨架屏

Inline Side-by-side
Showing 13 changed files with 28 additions and 26 deletions
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 4
5 @Entry 5 @Entry
6 @Component 6 @Component
7 -export struct detailedSkeleton { 7 +export struct channelSkeleton {
8 @State quantity: Array<number> = [1, 2, 3,] 8 @State quantity: Array<number> = [1, 2, 3,]
9 9
10 build() { 10 build() {
@@ -22,7 +22,7 @@ export struct detailedSkeleton { @@ -22,7 +22,7 @@ export struct detailedSkeleton {
22 22
23 23
24 Column() { 24 Column() {
25 - textArea('35%', 80) 25 + textArea('35%', 78)
26 } 26 }
27 .margin({ right: 0 }) 27 .margin({ right: 0 })
28 } 28 }
@@ -33,7 +33,7 @@ export struct detailedSkeleton { @@ -33,7 +33,7 @@ export struct detailedSkeleton {
33 33
34 34
35 Column() { 35 Column() {
36 - textArea('100%', 150) 36 + textArea('100%', 204)
37 } 37 }
38 .justifyContent(FlexAlign.SpaceBetween) 38 .justifyContent(FlexAlign.SpaceBetween)
39 .SkeletonStyle() 39 .SkeletonStyle()
@@ -48,7 +48,7 @@ export struct detailedSkeleton { @@ -48,7 +48,7 @@ export struct detailedSkeleton {
48 .RightStyle() 48 .RightStyle()
49 49
50 Column() { 50 Column() {
51 - textArea('35%', 80) 51 + textArea('35%', 78)
52 } 52 }
53 .margin({ right: 0 }) 53 .margin({ right: 0 })
54 } 54 }
@@ -70,13 +70,13 @@ function textArea(width: number | Resource | string = '100%', height: number | R @@ -70,13 +70,13 @@ function textArea(width: number | Resource | string = '100%', height: number | R
70 .height(height) 70 .height(height)
71 .backgroundColor('#FFF2F3F4') 71 .backgroundColor('#FFF2F3F4')
72 .margin({ top: 10 }) 72 .margin({ top: 10 })
73 - .borderRadius(5) 73 + // .borderRadius(5)
74 } 74 }
75 75
76 // 全局公共样式 76 // 全局公共样式
77 @Styles 77 @Styles
78 function SkeletonStyle() { 78 function SkeletonStyle() {
79 - .padding({ right: 20, left: 20 }) 79 + .padding({ right: 18, left: 18 })
80 .width('100%') 80 .width('100%')
81 .margin({ top: 10 }) 81 .margin({ top: 10 })
82 } 82 }
@@ -34,7 +34,7 @@ export struct detailedSkeleton { @@ -34,7 +34,7 @@ export struct detailedSkeleton {
34 .alignItems(HorizontalAlign.Start) 34 .alignItems(HorizontalAlign.Start)
35 35
36 Column() { 36 Column() {
37 - textArea('100%', 150) 37 + textArea('100%', 180)
38 } 38 }
39 .justifyContent(FlexAlign.SpaceBetween) 39 .justifyContent(FlexAlign.SpaceBetween)
40 .SkeletonStyle() 40 .SkeletonStyle()
@@ -61,13 +61,13 @@ function textArea(width: number | Resource | string = '100%', height: number | R @@ -61,13 +61,13 @@ function textArea(width: number | Resource | string = '100%', height: number | R
61 .height(height) 61 .height(height)
62 .backgroundColor('#FFF2F3F4') 62 .backgroundColor('#FFF2F3F4')
63 .margin({ top: 10 }) 63 .margin({ top: 10 })
64 - .borderRadius(5) 64 + // .borderRadius(5)
65 } 65 }
66 66
67 // 全局公共样式 67 // 全局公共样式
68 @Styles 68 @Styles
69 function SkeletonStyle() { 69 function SkeletonStyle() {
70 - .padding({ right: 20, left: 20 }) 70 + .padding({ right: 18, left: 18 })
71 .width('100%') 71 .width('100%')
72 .margin({ top: 10 }) 72 .margin({ top: 10 })
73 } 73 }
@@ -14,18 +14,18 @@ export struct detailedSkeleton { @@ -14,18 +14,18 @@ export struct detailedSkeleton {
14 Column() { 14 Column() {
15 Row() { 15 Row() {
16 Column() { 16 Column() {
17 - Image($rawfile('apph5/image/peopleSeleton.svg')).width('100%').height(50)// 后缀名不能省略 17 + Image($rawfile('apph5/image/peopleSeleton.svg')).width('100%').height(47)// 后缀名不能省略
18 .interpolation(ImageInterpolation.High) 18 .interpolation(ImageInterpolation.High)
19 - textArea('100%', 12) 19 + textArea('100%', 9)
20 }.width('72.00%').alignItems(HorizontalAlign.Start).margin({ right: 5 }) 20 }.width('72.00%').alignItems(HorizontalAlign.Start).margin({ right: 5 })
21 21
22 Column() { 22 Column() {
23 - textArea(24, 20)  
24 - textArea(24, 3)  
25 - textArea(24, 20) 23 + textArea(27, 25)
  24 + textArea(27, 4)
  25 + textArea(27, 20)
26 } 26 }
27 .border({ width: 1 }) 27 .border({ width: 1 })
28 - .borderColor('#FFF2F3F4') 28 + .borderColor('#FFF5F5F5')
29 .padding({ right: 2, left: 2, top: 0, bottom: 2 }) 29 .padding({ right: 2, left: 2, top: 0, bottom: 2 })
30 .justifyContent(FlexAlign.SpaceEvenly) 30 .justifyContent(FlexAlign.SpaceEvenly)
31 .alignItems(HorizontalAlign.Start) 31 .alignItems(HorizontalAlign.Start)
@@ -33,13 +33,15 @@ export struct detailedSkeleton { @@ -33,13 +33,15 @@ export struct detailedSkeleton {
33 .justifyContent(FlexAlign.SpaceBetween) 33 .justifyContent(FlexAlign.SpaceBetween)
34 .width('98%') 34 .width('98%')
35 35
  36 + // .height(64)
  37 +
36 BoxAndLine().width('100%') 38 BoxAndLine().width('100%')
37 - BoxAndBox({ firstBoxNumber: '65%', boxHeight: 70 }) 39 + BoxAndBox({ firstBoxNumber: '65%', boxHeight: 100 })
38 Column() { 40 Column() {
39 - textArea('100%', 100) 41 + textArea('100%', 79)
40 } 42 }
41 43
42 - BoxAndBox({ firstBoxNumber: '30%', boxHeight: 50 }) 44 + BoxAndBox({ firstBoxNumber: '30%', boxHeight: 51 })
43 45
44 }.width('45%') 46 }.width('45%')
45 .opacity(1) 47 .opacity(1)
@@ -48,17 +50,17 @@ export struct detailedSkeleton { @@ -48,17 +50,17 @@ export struct detailedSkeleton {
48 50
49 Column() { 51 Column() {
50 Column() { 52 Column() {
51 - textArea('100%', 12) 53 + textArea('100%', 13)
52 }.width('100%') 54 }.width('100%')
53 55
54 BoxAndLine() 56 BoxAndLine()
55 57
56 Column() { 58 Column() {
57 - textArea('95%', 100) 59 + textArea('95%', 126)
58 } 60 }
59 61
60 Column() { 62 Column() {
61 - textArea('95%', 12) 63 + textArea('95%', 13)
62 } 64 }
63 65
64 Row() { 66 Row() {
@@ -72,7 +74,7 @@ export struct detailedSkeleton { @@ -72,7 +74,7 @@ export struct detailedSkeleton {
72 }.width('95%').justifyContent(FlexAlign.SpaceBetween) 74 }.width('95%').justifyContent(FlexAlign.SpaceBetween)
73 75
74 Column() { 76 Column() {
75 - textArea('95%', 120) 77 + textArea('95%', 100)
76 } 78 }
77 }.width('45%') 79 }.width('45%')
78 }.justifyContent(FlexAlign.SpaceBetween) 80 }.justifyContent(FlexAlign.SpaceBetween)
@@ -89,8 +91,8 @@ struct BoxAndLine { @@ -89,8 +91,8 @@ struct BoxAndLine {
89 build() { 91 build() {
90 Column() { 92 Column() {
91 textArea('100%', 130) 93 textArea('100%', 130)
92 - textArea('100%', 12)  
93 - textArea('80%', 12) 94 + textArea('100%', 13)
  95 + textArea('80%', 13)
94 }.width('98%').alignItems(HorizontalAlign.Start) 96 }.width('98%').alignItems(HorizontalAlign.Start)
95 } 97 }
96 } 98 }
@@ -119,7 +121,7 @@ function textArea(width: number | Resource | string = '100%', height: number | R @@ -119,7 +121,7 @@ function textArea(width: number | Resource | string = '100%', height: number | R
119 Row() 121 Row()
120 .width(width) 122 .width(width)
121 .height(height) 123 .height(height)
122 - .backgroundColor('#FFF6F6F6') 124 + .backgroundColor('#FFF5F5F5')
123 .margin({ top: 5 }) 125 .margin({ top: 5 })
124 // .borderRadius(5) 126 // .borderRadius(5)
125 } 127 }
@@ -127,7 +129,7 @@ function textArea(width: number | Resource | string = '100%', height: number | R @@ -127,7 +129,7 @@ function textArea(width: number | Resource | string = '100%', height: number | R
127 // 全局公共样式 129 // 全局公共样式
128 @Styles 130 @Styles
129 function SkeletonStyle() { 131 function SkeletonStyle() {
130 - .padding({ right: 20, left: 20 }) 132 + .padding({ right: 14, left: 14 })
131 .width('100%') 133 .width('100%')
132 .margin({ top: 5 }) 134 .margin({ top: 5 })
133 } 135 }
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.