fix: 人民号动态图片上下滑动未能返回上一级

王士厅
Commit fc4a2b1a305d3755790db17616c28e2c268be075 fc4a2b1a 1 parent 1d516672
Showing 3 changed files with 85 additions and 78 deletions
sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailItemComponent.ets
sight_harmony/features/wdComponent/src/main/ets/pages/MultiPictureListPage.ets
sight_harmony/products/phone/src/main/ets/pages/view/MultiPictureDetailPageComponent.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailItemComponent.ets
View file @fc4a2b1
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailItemComponent.ets
View file @fc4a2b1
@@ -7,6 +7,7 @@ import { windowSizeManager } from '../utils/Managers';
 import { runWithAnimation } from '../utils/FuncUtils';
 import { PhotoListBean } from 'wdBean/Index';
 import { http } from '@kit.NetworkKit';
+import { router } from '@kit.ArkUI';
 const TAG = 'MultiPictureDetailItemComponent';
@@ -27,12 +28,15 @@ export struct MultiPictureDetailItemComponent {
   private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
   //alt app.media.picture_loading 设计稿尺寸
   @State imageWidth:string | number = 167
-  private scroller: Scroller = new Scroller()
+  private swiperControllerItem: SwiperController = new SwiperController()
+  @State currentOffset: number = 0
+  @Consume duration: number
   async aboutToAppear() {
     this.imageUri = this.MultiPictureDetailItem.picPath
     this.getPicture()
+    console.log(TAG, JSON.stringify(this.MultiPictureDetailItem))
   }
   /**
@@ -179,54 +183,79 @@ export struct MultiPictureDetailItemComponent {
   }
   build() {
-    Row() {
-      Scroll(this.scroller) {
-        if(this.imageUri != null && (this.imageUri.includes('.gif') || this.imageUri.includes('.GIF'))){
-          Image(this.imageUri)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
-            .alt($r('app.media.datail_imageLoading_w'))
-            .width(this.imageWidth)
-            .objectFit(ImageFit.Auto)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能
-            .interpolation(ImageInterpolation.High)
-            .autoResize(false)
-            .transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放
-            .defaultFocus(true)
-            .offset({
-              // TODO：知识点：通过offset控制图片的偏移
-              x: this.imageOffsetInfo.currentX,
-              y: this.imageOffsetInfo.currentY
-            })
-            .onComplete(event => {
-              this.imageWidth = '100%'
-            })
-        }else{
-          Image(this.imagePixelMap || 'app.media.datail_imageLoading_w')// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
-            .alt($r('app.media.datail_imageLoading_w'))
-            .width(this.imageWidth)
-            .objectFit(ImageFit.Auto)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能
-            .interpolation(ImageInterpolation.High)
-            .autoResize(false)
-            .transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放
-            .defaultFocus(true)
-            .offset({
-              // TODO：知识点：通过offset控制图片的偏移
-              x: this.imageOffsetInfo.currentX,
-              y: this.imageOffsetInfo.currentY
-            })
-            .onComplete(event => {
-              this.imageWidth = '100%'
-            })
+    Swiper(this.swiperControllerItem){
+      Row(){ // 居中显示
+        List(){
+          ListItem(){
+            if(this.imageUri != null && (this.imageUri.includes('.gif') || this.imageUri.includes('.GIF'))){
+              Image(this.imageUri)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
+                .alt($r('app.media.datail_imageLoading_w'))
+                .width(this.imageWidth)
+                .objectFit(ImageFit.Auto)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能
+                .interpolation(ImageInterpolation.High)
+                .autoResize(false)
+                .transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放
+                .defaultFocus(true)
+                .offset({
+                  // TODO：知识点：通过offset控制图片的偏移
+                  x: this.imageOffsetInfo.currentX,
+                  y: this.imageOffsetInfo.currentY
+
+                })
+                .onComplete(event => {
+                  this.imageWidth = '100%'
+                })
+            } else {
+              Image(this.imagePixelMap || 'app.media.datail_imageLoading_w')// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
+                .alt($r('app.media.datail_imageLoading_w'))
+                .width(this.imageWidth)
+                .objectFit(ImageFit.Auto)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能
+                .interpolation(ImageInterpolation.High)
+                .autoResize(false)
+                .transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放
+                .defaultFocus(true)
+                .offset({
+                  // TODO：知识点：通过offset控制图片的偏移
+                  x: this.imageOffsetInfo.currentX,
+                  y: this.imageOffsetInfo.currentY
+                })
+                .onComplete(event => {
+                  this.imageWidth = '100%'
+                })
+            }
+          }
         }
+        .alignListItem(ListItemAlign.Center)
+        .scrollBarWidth(0)
       }
-      .scrollable(ScrollDirection.Vertical)
-      .scrollBarWidth(0)
-      // .height(this.imageDefaultSize.height || "100%")
+      .justifyContent(FlexAlign.Center)
     }
+    .height('100%')
+    .vertical(true)
+    .autoPlay(false)
+    .cachedCount(1)
+    .indicator(false)
+    .displayCount(1)
+    .loop(false)
+    .zIndex(10)
+    .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
+      console.info("onGestureSwipe current offset: " + extraInfo.currentOffset)
+      this.currentOffset = Math.abs(extraInfo.currentOffset)
+    })
+    .onTouch((event: TouchEvent) => {
+      if (this.duration === 0) {
+        this.duration = 500
+      }
+      if (event.type === 1) {
+        // if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
+        if (this.currentOffset > 160) {
+          router.back()
+        }
+      }
+    })
     .onBlur(() => {
       this.resetCurrentImageInfo();
     })
-    .height('100%')
-    .width('100%')
-    .justifyContent(FlexAlign.Center)
     .gesture(
       GestureGroup(
         GestureMode.Exclusive,
@@ -326,5 +355,6 @@ export struct MultiPictureDetailItemComponent {
         //   })
       ),
     )
+    // .height(this.imageDefaultSize.height || "100%")
   }
 }
--- a/sight_harmony/features/wdComponent/src/main/ets/pages/MultiPictureListPage.ets
View file @fc4a2b1
+++ b/sight_harmony/features/wdComponent/src/main/ets/pages/MultiPictureListPage.ets
View file @fc4a2b1
@@ -24,6 +24,7 @@ export struct MultiPictureListPage {
   @Provide bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
   @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
   // @Provide bgc: Color = Color.White;
+  @Provide duration: number = 0
   aboutToAppear(): void {
     //获取宽高尺寸
--- a/sight_harmony/products/phone/src/main/ets/pages/view/MultiPictureDetailPageComponent.ets
View file @fc4a2b1
+++ b/sight_harmony/products/phone/src/main/ets/pages/view/MultiPictureDetailPageComponent.ets
View file @fc4a2b1
-import { NetworkUtil, Logger, NetworkType, SPHelper, WindowModel, StringUtils } from 'wdKit';
+import { NetworkUtil, Logger, SPHelper, StringUtils } from 'wdKit';
 import { ResponseDTO } from 'wdNetwork';
 import {
   ContentDetailDTO,
@@ -9,11 +9,9 @@ import {
   Params,
   InteractDataDTO
 } from 'wdBean';
-import display from '@ohos.display';
 import { DateTimeUtils } from 'wdKit/Index';
 import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
 import { SpConstants } from 'wdConstant/Index';
-import { router } from '@kit.ArkUI';
 import { common } from '@kit.AbilityKit';
 import { CommentDialogView } from 'wdDetailPlayShortVideo/Index';
 import { EmptyComponent,
@@ -44,7 +42,6 @@ export struct MultiPictureDetailPageComponent {
   @Consume topSafeHeight: number
   @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
   private swiperController: SwiperController = new SwiperController()
-  private swiperControllerItem: SwiperController = new SwiperController()
   @State swiperIndex: number = 0;
   @Provide followStatus: string | undefined = '0' // 关注状态
   @Provide showCommentList: boolean = false
@@ -56,14 +53,13 @@ export struct MultiPictureDetailPageComponent {
   @State showDownload: Boolean = false // 控制是否显示下载默认隐藏
   @State publishCommentModel: publishCommentModel = new publishCommentModel()
   @State operationButtonList: string[] = ['comment', 'like', 'collect', 'share']
-  @State currentOffset: number = 0
-  @State duration: number = 0
   @Provide interactData: InteractDataDTO = {} as InteractDataDTO
   pageParam: ParamType = {}
   followUserId: string = ''
   followUserName: string = ''
   @State isEnableSwipe: boolean = true;
   @State isScrollerTop: boolean = false;
+  @Provide duration: number = 0
   //watch监听页码回调
   onCurrentPageNumUpdated(): void {
@@ -300,32 +296,9 @@ export struct MultiPictureDetailPageComponent {
   imgSwiper() {
     Swiper(this.swiperController) {
       ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {
-        Swiper(this.swiperControllerItem) {
-          MultiPictureDetailItemComponent({ MultiPictureDetailItem: item, isEnableSwipe: this.isEnableSwipe })
-        }
-        .width('100%')
-        .height('100%')
-        .vertical(true)
-        .autoPlay(false)
-        .cachedCount(1)
-        .indicator(false)
-        .displayCount(1)
-        .loop(false)
-        .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
-          console.info("onGestureSwipe current offset: " + extraInfo.currentOffset)
-          this.currentOffset = Math.abs(extraInfo.currentOffset)
-        })
-        .onTouch((event: TouchEvent) => {
-          if (this.duration === 0) {
-            this.duration = 500
-          }
-          if (event.type === 1) {
-            // if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
-            if (this.currentOffset > 160) {
-              router.back()
-            }
-          }
-        })
+        MultiPictureDetailItemComponent(
+          { MultiPictureDetailItem: item, isEnableSwipe: this.isEnableSwipe }
+        )
       })
     }
     .index(this.swiperIndex)
@@ -425,9 +398,9 @@ export struct MultiPictureDetailPageComponent {
       Scroll(this.scroller) {
         Column() {
-          Row()
+          /*Row()
             .width("100%")
-            .height(this.contentDetailData.photoList?.[this.swiperIndex].picDesc ? 90 : 130)
+            .height(this.contentDetailData.photoList?.[this.swiperIndex].picDesc ? 90 : 130)*/
           Flex({
             direction: FlexDirection.Column
           }) {
@@ -451,7 +424,10 @@ export struct MultiPictureDetailPageComponent {
           })
         }
       }
-      .height(230)
+      .constraintSize({
+        maxHeight: 230
+      })
+      // .height(230)
       .edgeEffect(EdgeEffect.None)
       .scrollBarWidth(0)
       .scrollBar(BarState.Off)