Merge branch 'main' of http://192.168.1.42/developOne/harmonyPool into main
* 'main' of http://192.168.1.42/developOne/harmonyPool: 电子报优化骨架屏逻辑
Showing
3 changed files
with
16 additions
and
10 deletions
| @@ -51,6 +51,7 @@ export struct ENewspaperItemComponent { | @@ -51,6 +51,7 @@ export struct ENewspaperItemComponent { | ||
| 51 | .zIndex(10) | 51 | .zIndex(10) |
| 52 | newsSkeleton() | 52 | newsSkeleton() |
| 53 | .visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None) | 53 | .visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None) |
| 54 | + .width('100%') | ||
| 54 | .zIndex(1) | 55 | .zIndex(1) |
| 55 | if (this.contentWidth !== 0) { | 56 | if (this.contentWidth !== 0) { |
| 56 | Canvas(this.context) | 57 | Canvas(this.context) |
| @@ -63,12 +64,13 @@ export struct ENewspaperItemComponent { | @@ -63,12 +64,13 @@ export struct ENewspaperItemComponent { | ||
| 63 | .zIndex(15) | 64 | .zIndex(15) |
| 64 | } | 65 | } |
| 65 | } | 66 | } |
| 66 | - .padding({ | 67 | + // this.itemPicWidth this.itemPicHeight 外层计算已减去,注掉解决骨架屏压缩变形 |
| 68 | + /*.padding({ | ||
| 67 | top: 14, | 69 | top: 14, |
| 68 | right: 10, | 70 | right: 10, |
| 69 | bottom: 14, | 71 | bottom: 14, |
| 70 | left: 10 | 72 | left: 10 |
| 71 | - }) | 73 | + })*/ |
| 72 | .backgroundColor(Color.White) | 74 | .backgroundColor(Color.White) |
| 73 | .width('100%') | 75 | .width('100%') |
| 74 | .onTouch((event: TouchEvent) => { | 76 | .onTouch((event: TouchEvent) => { |
| @@ -260,6 +260,7 @@ export struct ENewspaperPageComponent { | @@ -260,6 +260,7 @@ export struct ENewspaperPageComponent { | ||
| 260 | .width('100%') | 260 | .width('100%') |
| 261 | .height(px2vp(this.picHeight) + 32) | 261 | .height(px2vp(this.picHeight) + 32) |
| 262 | .margin({ top: 59, left: 10, right: 10 }) | 262 | .margin({ top: 59, left: 10, right: 10 }) |
| 263 | + .padding({ right: 10, left: 10 }) | ||
| 263 | } | 264 | } |
| 264 | 265 | ||
| 265 | if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) { | 266 | if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) { |
| @@ -447,7 +448,7 @@ export struct ENewspaperPageComponent { | @@ -447,7 +448,7 @@ export struct ENewspaperPageComponent { | ||
| 447 | private async getNewspaperList() { | 448 | private async getNewspaperList() { |
| 448 | // ENewspaperItemComponent .padding({ top:14, right: 10, bottom: 14, left: 10 }) | 449 | // ENewspaperItemComponent .padding({ top:14, right: 10, bottom: 14, left: 10 }) |
| 449 | // 计算图片的内容宽高 | 450 | // 计算图片的内容宽高 |
| 450 | - let ratio = this.ratio == '100%' ? 1 : 0.6 | 451 | + let ratio = this.ratio == '100%' ? 1 : 0.5 |
| 451 | this.itemPicWidth = this.picWidth * ratio - vp2px(20) | 452 | this.itemPicWidth = this.picWidth * ratio - vp2px(20) |
| 452 | this.itemPicHeight = this.picHeight - vp2px(28) | 453 | this.itemPicHeight = this.picHeight - vp2px(28) |
| 453 | try { | 454 | try { |
| @@ -14,26 +14,30 @@ export struct newsSkeleton { | @@ -14,26 +14,30 @@ export struct newsSkeleton { | ||
| 14 | Column() { | 14 | Column() { |
| 15 | Row() { | 15 | Row() { |
| 16 | Column() { | 16 | Column() { |
| 17 | - Image($r('app.media.peopleSeleton')).width('100%').height(47)// 后缀名不能省略 | 17 | + Image($r('app.media.peopleSeleton')) |
| 18 | + .width(120.89) | ||
| 19 | + .height(46.98)// 后缀名不能省略 | ||
| 18 | .interpolation(ImageInterpolation.High) | 20 | .interpolation(ImageInterpolation.High) |
| 19 | textArea('100%', 8) | 21 | textArea('100%', 8) |
| 20 | } | 22 | } |
| 21 | - .width(124) | 23 | + .margin({ |
| 24 | + right: 5 | ||
| 25 | + }) | ||
| 26 | + .width(120.89) | ||
| 22 | .alignItems(HorizontalAlign.Start) | 27 | .alignItems(HorizontalAlign.Start) |
| 23 | - .margin({ right: 5 }) | ||
| 24 | 28 | ||
| 25 | Column() { | 29 | Column() { |
| 26 | Row() | 30 | Row() |
| 27 | - .width(27) | 31 | + .width(`16.5%`) |
| 28 | .height(25) | 32 | .height(25) |
| 29 | .backgroundColor('#FFF5F5F5') | 33 | .backgroundColor('#FFF5F5F5') |
| 30 | Row() | 34 | Row() |
| 31 | - .width(27) | 35 | + .width(`16.5%`) |
| 32 | .height(4) | 36 | .height(4) |
| 33 | .backgroundColor('#FFF5F5F5') | 37 | .backgroundColor('#FFF5F5F5') |
| 34 | .margin({ top: 3, bottom: 3 }) | 38 | .margin({ top: 3, bottom: 3 }) |
| 35 | Row() | 39 | Row() |
| 36 | - .width(27) | 40 | + .width(`16.5%`) |
| 37 | .height(20) | 41 | .height(20) |
| 38 | .backgroundColor('#FFF5F5F5') | 42 | .backgroundColor('#FFF5F5F5') |
| 39 | // textArea(27, 25) | 43 | // textArea(27, 25) |
| @@ -113,7 +117,6 @@ export struct newsSkeleton { | @@ -113,7 +117,6 @@ export struct newsSkeleton { | ||
| 113 | Column().backgroundColor('#909090').height(5).width(326) | 117 | Column().backgroundColor('#909090').height(5).width(326) |
| 114 | } | 118 | } |
| 115 | .width('100%') | 119 | .width('100%') |
| 116 | - .padding({ right: 10, left: 10 }) | ||
| 117 | } | 120 | } |
| 118 | .height('100%') | 121 | .height('100%') |
| 119 | 122 |
-
Please register or login to post a comment