feat:优化电子报弹出方式，优化电子报骨架图展示

wangliang_wd
Commit b92b58038c1b84818398410760e4dde6c51e501d b92b5803 1 parent fa412e96
Showing 3 changed files with 80 additions and 42 deletions
sight_harmony/features/wdComponent/src/main/ets/components/ENewspaperPageComponent.ets
sight_harmony/features/wdComponent/src/main/ets/components/skeleton/newsSkeleton.ets
sight_harmony/features/wdComponent/src/main/ets/dialog/ENewspaperListDialog.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/ENewspaperPageComponent.ets
View file @b92b580
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/ENewspaperPageComponent.ets
View file @b92b580
@@ -9,7 +9,7 @@ import font from '@ohos.font';
 import { ENewspaperPageDialog } from '../dialog/ENewspaperPageDialog';
 import { RMCalendarBean } from './calendar/RMCalendarBean';
 import { newsSkeleton } from './skeleton/newsSkeleton';
-import { Logger, ToastUtils, NetworkUtil, CustomToast } from 'wdKit/Index';
+import { Logger, ToastUtils, NetworkUtil, CustomToast, DisplayUtils } from 'wdKit/Index';
 import { TrackingContent, TrackConstants, TrackingButton } from 'wdTracking/Index';
 import { WDShare } from 'wdShare/Index';
 import { window } from '@kit.ArkUI';
@@ -25,6 +25,9 @@ export struct ENewspaperPageComponent {
   @State picHeight: number = 0
   @Provide itemPicWidth: number = 0
   @Provide itemPicHeight: number = 0
+
+  @Provide topMargin: number = DisplayUtils.getDeviceHeight()
+
   @State newspaperListBean: NewspaperListBean = {} as NewspaperListBean
   @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
   @State pageDialogShow: boolean = false
@@ -404,6 +407,14 @@ export struct ENewspaperPageComponent {
           }
           if (this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
             this.isOpenListDialog = true
+            animateTo({
+              duration: 300,
+              onFinish: () => {
+              }
+            }, () => {
+              this.topMargin = 0;
+            })
+
             //电子报--读报纸点击
             TrackingContent.clickWithEvent('read_newspaper_click', TrackConstants.PageName.NewsPaperPage,
               TrackConstants.PageName.NewsPaperPage
@@ -429,8 +440,16 @@ export struct ENewspaperPageComponent {
           newspaperListBean: this.newspaperListBean,
           scrollIndex: this.swiperIndex,
           closeDialog: () => {
+            animateTo({
+              duration: 300,
+              onFinish: () => {
                 this.isOpenListDialog = false
               }
+            }, () => {
+              this.topMargin = DisplayUtils.getDeviceHeight();
+            })
+
+          }
         })
       }
     }
@@ -451,6 +470,7 @@ export struct ENewspaperPageComponent {
     // 计算图片的内容宽高
     this.itemPicWidth = this.picWidth - vp2px(20)
     this.itemPicHeight = this.picHeight - vp2px(28)
+
     try {
       if (NetworkUtil.isNetConnected()) {
         let listBean =
--- a/sight_harmony/features/wdComponent/src/main/ets/components/skeleton/newsSkeleton.ets
View file @b92b580
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/skeleton/newsSkeleton.ets
View file @b92b580
@@ -7,7 +7,7 @@
 export struct newsSkeleton {
   @State quantity: Array<number> = [1, 2, 3,]
   @State showBottom: boolean = true
-
+  @Consume itemPicHeight: number
   build() {
     Row() {
       Column() {
@@ -17,12 +17,12 @@ export struct newsSkeleton {
               Column() {
                 Image($r('app.media.peopleSeleton'))
                   .width('100%')
-                  .height(47)// 后缀名不能省略
+                  .height(this.getCompHeight(47))// 后缀名不能省略
                   .interpolation(ImageInterpolation.High)
                   .margin({
                     bottom: 6
                   })
-                textArea('100%', 8)
+                textArea('100%', this.getCompHeight(8),this.getCompHeight(5))
               }
               .margin({
                 right: '2%'
@@ -33,20 +33,17 @@ export struct newsSkeleton {
               Column() {
                 Row()
                   .width(`100%`)
-                  .height(25)
+                  .height(this.getCompHeight(25))
                   .backgroundColor('#FFF5F5F5')
                 Row()
                   .width(`100%`)
-                  .height(4)
+                  .height(this.getCompHeight(4))
                   .backgroundColor('#FFF5F5F5')
-                  .margin({ top: 3, bottom: 3 })
+                  .margin({ top: this.getCompHeight(3), bottom: this.getCompHeight(3) })
                 Row()
                   .width(`100%`)
-                  .height(20)
+                  .height(this.getCompHeight(20))
                   .backgroundColor('#FFF5F5F5')
-                // textArea(27, 25)
-                // textArea(27, 4)
-                // textArea(27, 20)
               }
               .width(`22%`)
               .border({ width: 1 })
@@ -63,59 +60,59 @@ export struct newsSkeleton {
             .width('100%')
             BoxAndLine().width('100%')
-            BoxAndBox({ firstBoxNumber: '65%', boxHeight: 100 })
+            BoxAndBox({ firstBoxNumber: '65%', boxHeight: this.getCompHeight(100) })
             Column() {
-              textArea('100%', 79)
+              textArea('100%', this.getCompHeight(79),this.getCompHeight(5))
             }
-            BoxAndBox({ firstBoxNumber: '30%', boxHeight: 51 })
+            BoxAndBox({ firstBoxNumber: '30%', boxHeight: this.getCompHeight(48) })
           }
-          .width('50%')
+          .width('49%')
           .margin({ right: 5 })
           Column() {
             Column() {
-              textArea('100%', 13)
+              textArea('100%', this.getCompHeight(13),this.getCompHeight(0))
             }.width('100%')
             Column() {
-              textArea('100%', 136)
-              textArea('100%', 13)
-              textArea('80%', 13)
+              textArea('100%', this.getCompHeight(136),this.getCompHeight(5))
+              textArea('100%', this.getCompHeight(13),this.getCompHeight(5))
+              textArea('80%', this.getCompHeight(13),this.getCompHeight(5))
             }.width('100%').alignItems(HorizontalAlign.Start)
             Column() {
-              textArea('100%', 126)
+              textArea('100%', this.getCompHeight(126),this.getCompHeight(5))
             }
             Column() {
-              textArea('100%', 13)
+              textArea('100%', this.getCompHeight(13),this.getCompHeight(5))
             }
             Row() {
               Column() {
-                textArea('100%', 30)
+                textArea('100%', this.getCompHeight(30),this.getCompHeight(5))
               }.width('50%').margin({ right: 5 })
               Column() {
-                textArea('100%', 30)
+                textArea('100%', this.getCompHeight(30),this.getCompHeight(5))
               }.layoutWeight(1)
             }.width('100%').justifyContent(FlexAlign.SpaceBetween)
             Column() {
-              textArea('100%', 100)
+              textArea('100%', this.getCompHeight(100),this.getCompHeight(5))
             }
           }
-          .width('50%')
+          .width('49%')
         }
         .justifyContent(FlexAlign.SpaceBetween)
         .backgroundColor(Color.White)
         .padding({
-          top: 15,
-          bottom: 15,
-          right: 15,
-          left: 15
+          top: 14,
+          right: 10,
+          bottom: 14,
+          left: 10
         })
         if (this.showBottom) {
           // Column().backgroundColor('#CBCBCB').height(5).width(339)
@@ -133,17 +130,31 @@ export struct newsSkeleton {
     .width('100%')
   }
+
+  getCompHeight(height: number): number{
+    //设计图高度 478
+  let compH:number = height*px2vp(this.itemPicHeight)/478
+  return compH;
+}
+
 }
 @Component
 struct BoxAndLine {
+  @Consume itemPicHeight: number
   build() {
     Column() {
-      textArea('100%', 130)
-      textArea('100%', 13)
-      textArea('80%', 13)
+      textArea('100%', this.getCompHeight(130),this.getCompHeight(5))
+      textArea('100%', this.getCompHeight(13),this.getCompHeight(5))
+      textArea('80%', this.getCompHeight(13),this.getCompHeight(5))
     }.alignItems(HorizontalAlign.Start)
   }
+
+  getCompHeight(height: number): number{
+    //设计图高度 478
+    let compH:number = height*px2vp(this.itemPicHeight)/478
+    return compH;
+  }
 }
@@ -151,29 +162,37 @@ struct BoxAndLine {
 struct BoxAndBox {
   @Prop firstBoxNumber: number | Resource | string
   @Prop boxHeight: number | Resource | string
-
+  @Consume itemPicHeight: number
   build() {
     Row() {
       Column() {
-        textArea('100%', this.boxHeight)
+        textArea('100%', this.boxHeight,this.getCompHeight(5))
       }.width(this.firstBoxNumber).margin({ right: 5 })
       Column() {
-        textArea('100%', this.boxHeight)
+        textArea('100%', this.boxHeight,this.getCompHeight(5))
       }.layoutWeight(1)
     }.width('100%').justifyContent(FlexAlign.SpaceBetween)
   }
+
+  getCompHeight(height: number): number{
+    //设计图高度 478
+    let compH:number = height*px2vp(this.itemPicHeight)/478
+    return compH;
+  }
 }
 @Builder
-function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
+function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%',topM:number) {
   Row()
     .width(width)
     .height(height)
-    .backgroundColor('#FFF5F5F5')
-    .margin({ top: 5 })
+    .backgroundColor(height === 13?Color.Red:'#FFF5F5F5')
+    .margin({ top: topM })
   // .borderRadius(5)
 }
+
+
--- a/sight_harmony/features/wdComponent/src/main/ets/dialog/ENewspaperListDialog.ets
View file @b92b580
+++ b/sight_harmony/features/wdComponent/src/main/ets/dialog/ENewspaperListDialog.ets
View file @b92b580
@@ -21,6 +21,7 @@ export struct ENewspaperListDialog {
   @State scrollOffset: number = 0
   @State isCurrentViewOpen: boolean = false
   @Consume bottomSafeHeight: number
+  @Consume topMargin:number
   //文字版选择弹框
   pageListDialogController: CustomDialogController = new CustomDialogController({
     builder: ENewspaperPageDialog({
@@ -292,7 +293,7 @@ export struct ENewspaperListDialog {
           left: 15,
           right: 15,
           // top: 16,
-          // bottom: 16
+          bottom: 25
         })
         .margin({
           bottom: 85
@@ -317,15 +318,13 @@ export struct ENewspaperListDialog {
         })
       }
-      .margin({ top: this.topHeight })
+      .margin({ top: this.topHeight + this.topMargin})
       .width('100%')
       .backgroundColor(Color.White)
-
     }
     .width('100%')
     .height('100%')
     .backgroundColor('#80000000')
-    .margin({ bottom: 50 })
     .onClick(() => {
       if (this.closeDialog) {
         this.closeDialog()