频道列表、H5专题、H5详情 接入骨架屏

@@ -13,6 +13,7 @@ export struct WdWebComponent {
   @Prop backVisibility: boolean = false
   @Prop webUrl: string = ''
   @Prop @Watch('onReloadStateChanged') reload: number = 0
+  @Link isPageEnd: boolean
 
   build() {
     Column() {
@@ -37,7 +38,6 @@ export struct WdWebComponent {
         .horizontalScrollBarAccess(false)
         .verticalScrollBarAccess(false)
         .onPageBegin((event) => {
-          console.log(this.webUrl,"yzl")
           this.onPageBegin(event?.url);
         })
         .onPageEnd((event) => {
@@ -86,18 +86,19 @@ export struct WdWebComponent {
     BridgeUtil.webViewLoadLocalJs(getContext(this), this.webviewControl)
   }
   onPageEnd: (url?: string) => void = () => {
+    this.isPageEnd = true
     Logger.debug(TAG, 'onPageEnd');
   }
   onLoadIntercept: (url?: string) => boolean = () => {
     Logger.debug(TAG, 'onLoadIntercept return false');
     return false
   }
+
   onReloadStateChanged() {
     Logger.info(TAG, `onReloadStateChanged:::refresh, this.reload: ${this.reload}`);
     if (this.reload > 0) {
       this.webviewControl.refresh()
     }
   }
-
 }
 

@@ -17,6 +17,7 @@ export struct WdWebLocalComponent {
   @Prop backVisibility: boolean = false
   @Prop webResource: Resource = {} as Resource
   @State webHeight: string | number = '100%'
+  @Link isPageEnd: boolean
 
   build() {
     Column() {
@@ -109,6 +110,7 @@ export struct WdWebLocalComponent {
   onPageEnd: (url?: string) => void = () => {
     Logger.debug(TAG, 'onPageEnd');
     this.onWebPrepared()
+    this.isPageEnd = true
   }
   onLoadIntercept: (url?: string) => boolean = () => {
     Logger.debug(TAG, 'onLoadIntercept return false');

@@ -19,6 +19,7 @@ import { HttpUrlUtils } from 'wdNetwork/Index';
 import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
 import { PageRepository } from '../repository/PageRepository';
+import { detailedSkeleton } from './skeleton/detailSkeleton'
 
 const TAG = 'ImageAndTextPageComponent'
 
@@ -30,41 +31,49 @@ export struct ImageAndTextPageComponent {
   @State recommendList: ContentDTO[] = []
   @State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
   @State interactData: InteractDataDTO = {} as InteractDataDTO
+  @State isPageEnd: boolean = false
+
   build() {
     Column() {
-      // 发布时间
-      Row() {
-        Image($r('app.media.icon_ren_min_ri_bao'))
-          .width(70)
-          .height(28)
-        Text(this.contentDetailData[0]?.publishTime)
-          .fontColor($r('app.color.color_B0B0B0'))
-          .fontSize($r('app.float.font_size_13'))
-          .height('100%')
-          .align(Alignment.End)
-      }
-      .width(CommonConstants.FULL_WIDTH)
-      .height(32)
-      .padding({ left: 15, right: 15, })
-      .justifyContent(FlexAlign.SpaceBetween)
-      .backgroundColor(Color.White)
+      if (!this.isPageEnd) {
+        detailedSkeleton()
+      } else {
+        // 发布时间
+        Row() {
+          Image($r('app.media.icon_ren_min_ri_bao'))
+            .width(70)
+            .height(28)
+          Text(this.contentDetailData[0]?.publishTime)
+            .fontColor($r('app.color.color_B0B0B0'))
+            .fontSize($r('app.float.font_size_13'))
+            .height('100%')
+            .align(Alignment.End)
+        }
+        .width(CommonConstants.FULL_WIDTH)
+        .height(32)
+        .padding({ left: 15, right: 15, })
+        .justifyContent(FlexAlign.SpaceBetween)
+        .backgroundColor(Color.White)
 
-      Row() {
-        Image($r('app.media.line'))
-          .width('100%')
-          .height(6)
-          .objectFit(ImageFit.Cover)
-          .margin({ top: 10 })
+        Row() {
+          Image($r('app.media.line'))
+            .width('100%')
+            .height(6)
+            .objectFit(ImageFit.Cover)
+            .margin({ top: 10 })
+        }
+        .padding({ left: 15, right: 15 })
+        .backgroundColor(Color.White)
       }
-      .padding({ left: 15, right: 15 })
-      .backgroundColor(Color.White)
+
 
       Stack({ alignContent: Alignment.Bottom }) {
         Scroll(this.scroller) {
           Column() {
             ImageAndTextWebComponent({
               contentDetailData: this.contentDetailData,
-              action: this.action
+              action: this.action,
+              isPageEnd: $isPageEnd
             })
             Column() {
               if (this.recommendList.length > 0) {
@@ -77,6 +86,7 @@ export struct ImageAndTextPageComponent {
         .width(CommonConstants.FULL_WIDTH)
         .height(CommonConstants.FULL_HEIGHT)
         .padding({ bottom: 76 })
+
         // .scrollBar(BarState.Off)
 
         //底部交互区

@@ -15,6 +15,7 @@ import { BridgeWebViewControl } from 'wdJsBridge/Index';
 export struct ImageAndTextWebComponent {
   action: Action = {} as Action
   @State reload: number = 0;
+  @Link isPageEnd: boolean
   @Prop @Watch('onDetailDataUpdated') contentDetailData: ContentDetailDTO [] = [] as ContentDetailDTO []
   webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
   private h5ReceiveAppData: H5ReceiveDetailBean = { dataSource: '2' } as H5ReceiveDetailBean
@@ -84,7 +85,9 @@ export struct ImageAndTextWebComponent {
         webviewControl: this.webviewControl,
         webResource: $rawfile('apph5/index.html'),
         backVisibility: false,
-        onWebPrepared: this.onWebPrepared.bind(this)
+        onWebPrepared: this.onWebPrepared.bind(this),
+        isPageEnd:$isPageEnd
+
       })
     }
   }

@@ -4,6 +4,7 @@ import { WdWebComponent } from 'wdWebComponent';
 import router from '@ohos.router';
 import { CommonConstants } from 'wdConstant'
 import { BridgeWebViewControl } from 'wdJsBridge/Index';
+import { detailedSkeleton } from './skeleton/detailSkeleton'
 
 const TAG = 'SpacialTopicPageComponent'
 
@@ -13,14 +14,20 @@ export struct SpacialTopicPageComponent {
   scroller: Scroller = new Scroller();
   action: Action = {} as Action
   @State webUrl: string = '';
+  @State isPageEnd: boolean = false
+
   build() {
     Column() {
+      if (!this.isPageEnd) {
+        detailedSkeleton()
+      }
       Stack({ alignContent: Alignment.Bottom }) {
         Column() {
           WdWebComponent({
             webviewControl: this.webviewControl,
             webUrl: this.webUrl,
             backVisibility: false,
+            isPageEnd:$isPageEnd
           })
         }
         .padding({ bottom: 56 })
@@ -64,6 +71,8 @@ export struct SpacialTopicPageComponent {
         .padding({ left: 15, right: 15, bottom: 20, top: 20 })
         .justifyContent(FlexAlign.SpaceBetween)
         .backgroundColor(Color.White)
+
+
       }
     }.width(CommonConstants.FULL_WIDTH).height(CommonConstants.FULL_HEIGHT)
     .backgroundColor(Color.White)

@@ -13,6 +13,7 @@ import CustomRefreshLoadLayout from './CustomRefreshLoadLayout';
 import { CompParser } from '../CompParser';
 import { CompDTO } from 'wdBean';
 import PageHelper from '../../viewmodel/PageHelper';
+import { channelSkeleton } from '../skeleton/channelSkeleton'
 
 const TAG = 'PageComponent';
 
@@ -97,10 +98,11 @@ export struct PageComponent {
 
   @Builder
   LoadingLayout() {
-    CustomRefreshLoadLayout({
-      refreshBean: new RefreshLayoutBean(true,
-        $r('app.media.ic_pull_up_load'), $r('app.string.pull_up_load_text'), this.pageModel.pullDownRefreshHeight)
-    })
+    channelSkeleton()
+    // CustomRefreshLoadLayout({
+    //   refreshBean: new RefreshLayoutBean(true,
+    //     $r('app.media.ic_pull_up_load'), $r('app.string.pull_up_load_text'), this.pageModel.pullDownRefreshHeight)
+    // })
   }
 
   async aboutToAppear() {