王士厅

电子报优化骨架屏逻辑,折叠屏bug修改

@@ -64,13 +64,12 @@ export struct ENewspaperItemComponent { @@ -64,13 +64,12 @@ export struct ENewspaperItemComponent {
64 .zIndex(15) 64 .zIndex(15)
65 } 65 }
66 } 66 }
67 - // this.itemPicWidth this.itemPicHeight 外层计算已减去,注掉解决骨架屏压缩变形  
68 - /*.padding({ 67 + .padding({
69 top: 14, 68 top: 14,
70 right: 10, 69 right: 10,
71 bottom: 14, 70 bottom: 14,
72 left: 10 71 left: 10
73 - })*/ 72 + })
74 .backgroundColor(Color.White) 73 .backgroundColor(Color.White)
75 .width('100%') 74 .width('100%')
76 .onTouch((event: TouchEvent) => { 75 .onTouch((event: TouchEvent) => {
@@ -145,7 +145,6 @@ export struct ENewspaperPageComponent { @@ -145,7 +145,6 @@ export struct ENewspaperPageComponent {
145 145
146 let ratio = this.ratio == '100%' ? 1 : 0.5 146 let ratio = this.ratio == '100%' ? 1 : 0.5
147 this.picWidth = this.picWidth * ratio 147 this.picWidth = this.picWidth * ratio
148 - this.picHeight = this.picHeight  
149 // 默认日期 148 // 默认日期
150 const date = new Date() 149 const date = new Date()
151 const month = date.getMonth() + 1 150 const month = date.getMonth() + 1
@@ -174,14 +173,17 @@ export struct ENewspaperPageComponent { @@ -174,14 +173,17 @@ export struct ENewspaperPageComponent {
174 173
175 resizeWindow() { 174 resizeWindow() {
176 this.windowClass?.on('windowSizeChange', () => { 175 this.windowClass?.on('windowSizeChange', () => {
177 - this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width || this.displayTool.width  
178 - // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件  
179 - this.ratio = this.screenWidth > 2000 ? '50%' : '100%'  
180 - let ratio = this.ratio == '100%' ? 1 : 0.5  
181 - this.picWidth = this.screenWidth - vp2px(20)  
182 - this.picWidth = this.picWidth * ratio 176 + this.resize()
183 }); 177 });
184 } 178 }
  179 + resize() {
  180 + this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width || this.displayTool.width
  181 + // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件
  182 + this.ratio = this.screenWidth > 2000 ? '50%' : '100%'
  183 + let ratio = this.ratio == '100%' ? 1 : 0.5
  184 + this.picWidth = this.screenWidth - vp2px(20)
  185 + this.picWidth = this.picWidth * ratio
  186 + }
185 187
186 build() { 188 build() {
187 Stack() { 189 Stack() {
@@ -257,10 +259,10 @@ export struct ENewspaperPageComponent { @@ -257,10 +259,10 @@ export struct ENewspaperPageComponent {
257 middle: { anchor: "__container__", align: HorizontalAlign.Center } 259 middle: { anchor: "__container__", align: HorizontalAlign.Center }
258 }) 260 })
259 .id('news_skeleton_id') 261 .id('news_skeleton_id')
260 - .width('100%')  
261 - .height(px2vp(this.picHeight) + 32) 262 + .width(px2vp(this.picWidth))
  263 + .height(px2vp(this.picHeight))
262 .margin({ top: 59, left: 10, right: 10 }) 264 .margin({ top: 59, left: 10, right: 10 })
263 - .padding({ right: 10, left: 10 }) 265 + // .padding({ right: 10, left: 10 })
264 } 266 }
265 267
266 if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) { 268 if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
@@ -448,8 +450,7 @@ export struct ENewspaperPageComponent { @@ -448,8 +450,7 @@ export struct ENewspaperPageComponent {
448 private async getNewspaperList() { 450 private async getNewspaperList() {
449 // ENewspaperItemComponent .padding({ top:14, right: 10, bottom: 14, left: 10 }) 451 // ENewspaperItemComponent .padding({ top:14, right: 10, bottom: 14, left: 10 })
450 // 计算图片的内容宽高 452 // 计算图片的内容宽高
451 - let ratio = this.ratio == '100%' ? 1 : 0.5  
452 - this.itemPicWidth = this.picWidth * ratio - vp2px(20) 453 + this.itemPicWidth = this.picWidth - vp2px(20)
453 this.itemPicHeight = this.picHeight - vp2px(28) 454 this.itemPicHeight = this.picHeight - vp2px(28)
454 try { 455 try {
455 if (NetworkUtil.isNetConnected()) { 456 if (NetworkUtil.isNetConnected()) {
@@ -15,35 +15,39 @@ export struct newsSkeleton { @@ -15,35 +15,39 @@ export struct newsSkeleton {
15 Row() { 15 Row() {
16 Column() { 16 Column() {
17 Image($r('app.media.peopleSeleton')) 17 Image($r('app.media.peopleSeleton'))
18 - .width(120.89)  
19 - .height(46.98)// 后缀名不能省略 18 + .width('100%')
  19 + .height(47)// 后缀名不能省略
20 .interpolation(ImageInterpolation.High) 20 .interpolation(ImageInterpolation.High)
  21 + .margin({
  22 + bottom: 6
  23 + })
21 textArea('100%', 8) 24 textArea('100%', 8)
22 } 25 }
23 .margin({ 26 .margin({
24 - right: 5 27 + right: '2%'
25 }) 28 })
26 - .width(120.89) 29 + .width(`76%`)
27 .alignItems(HorizontalAlign.Start) 30 .alignItems(HorizontalAlign.Start)
28 31
29 Column() { 32 Column() {
30 Row() 33 Row()
31 - .width(`16.5%`) 34 + .width(`100%`)
32 .height(25) 35 .height(25)
33 .backgroundColor('#FFF5F5F5') 36 .backgroundColor('#FFF5F5F5')
34 Row() 37 Row()
35 - .width(`16.5%`) 38 + .width(`100%`)
36 .height(4) 39 .height(4)
37 .backgroundColor('#FFF5F5F5') 40 .backgroundColor('#FFF5F5F5')
38 .margin({ top: 3, bottom: 3 }) 41 .margin({ top: 3, bottom: 3 })
39 Row() 42 Row()
40 - .width(`16.5%`) 43 + .width(`100%`)
41 .height(20) 44 .height(20)
42 .backgroundColor('#FFF5F5F5') 45 .backgroundColor('#FFF5F5F5')
43 // textArea(27, 25) 46 // textArea(27, 25)
44 // textArea(27, 4) 47 // textArea(27, 4)
45 // textArea(27, 20) 48 // textArea(27, 20)
46 } 49 }
  50 + .width(`22%`)
47 .border({ width: 1 }) 51 .border({ width: 1 })
48 .borderColor('#FFF5F5F5') 52 .borderColor('#FFF5F5F5')
49 .padding({ 53 .padding({
@@ -119,6 +123,7 @@ export struct newsSkeleton { @@ -119,6 +123,7 @@ export struct newsSkeleton {
119 .width('100%') 123 .width('100%')
120 } 124 }
121 .height('100%') 125 .height('100%')
  126 + .width('100%')
122 127
123 } 128 }
124 } 129 }