图集滑动优化

@@ -114,7 +114,32 @@ export struct MultiPictureDetailPageComponent {
 
   build() {
     RelativeContainer() {
-      this.init()
+      if (this.contentDetailData.rmhPlatform == 1) {
+        this.rmh()
+      }
+      if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {
+        this.imgSwiper()
+      }
+      if (this.netStatus !== undefined) {
+        this.noNet()
+      }
+      if (this.isOffLine) {
+        this.offLine()
+      }
+      Column() {
+        if (!this.showDownload) {
+          this.NShowDownload()
+        }
+        if (this.showDownload) {
+          this.YShowDownload()
+        }
+      }
+      .zIndex(10)
+      .id('e_swiper_bottom')
+      .alignRules({
+        bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
+        middle: { anchor: "__container__", align: HorizontalAlign.Center }
+      })
       CommentDialogView({
         index: $index,
         currentIndex: $currentIndex,
@@ -131,323 +156,215 @@ export struct MultiPictureDetailPageComponent {
   }
 
   @Builder
-  init() {
-    if (this.contentDetailData.rmhPlatform == 1) {
-      if (!this.showDownload) {
-        Row() {
-          Row({ space: 8 }) {
-            if (this.getImgUrl()) {
-              Row() {
-                Stack() {
-                  Image(this.getImgUrl())
-                    .borderRadius(18)
-                    .aspectRatio(1)
-                    .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
-                    .width(36)
-                    .height(36)
-                    .objectFit(ImageFit.Fill)
-                    .interpolation(ImageInterpolation.High)
-                  if (!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)) {
-                    Stack() {
-                      Image(this.contentDetailData.rmhInfo?.authIcon)
-                        .width($r('app.float.vp_13'))
-                        .height($r('app.float.vp_13'))
-                        .objectFit(ImageFit.Cover)
-                    }
-                    .width(36)
-                    .height(36)
-                    .alignContent(Alignment.BottomEnd)
+  rmh() {
+    if (!this.showDownload) {
+      Row() {
+        Row({ space: 8 }) {
+          if (this.getImgUrl()) {
+            Row() {
+              Stack() {
+                Image(this.getImgUrl())
+                  .borderRadius(18)
+                  .aspectRatio(1)
+                  .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
+                  .width(36)
+                  .height(36)
+                  .objectFit(ImageFit.Fill)
+                  .interpolation(ImageInterpolation.High)
+                if (!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)) {
+                  Stack() {
+                    Image(this.contentDetailData.rmhInfo?.authIcon)
+                      .width($r('app.float.vp_13'))
+                      .height($r('app.float.vp_13'))
+                      .objectFit(ImageFit.Cover)
                   }
+                  .width(36)
+                  .height(36)
+                  .alignContent(Alignment.BottomEnd)
                 }
-                .width(36)
-                .height(36)
-                .alignContent(Alignment.Center)
-                .onClick(() => {
-                  if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
-                    // 号主页
-                    const params: Params = {
-                      creatorId: this.contentDetailData.rmhInfo.rmhId,
-                      pageID: ''
-                    }
-                    WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
-                  }
-
-                })
               }
-              .width('13%')
-              .height('100%')
-            }
+              .width(36)
+              .height(36)
+              .alignContent(Alignment.Center)
+              .onClick(() => {
+                if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
+                  // 号主页
+                  const params: Params = {
+                    creatorId: this.contentDetailData.rmhInfo.rmhId,
+                    pageID: ''
+                  }
+                  WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
+                }
 
-            Row() {
-              Flex({
-                direction: FlexDirection.Column,
-                justifyContent: FlexAlign.SpaceAround,
-                alignItems: ItemAlign.Start
-              }) {
-                Text(`${this.contentDetailData?.rmhInfo?.rmhName}`)
-                  .fontColor(Color.White)
-                  .fontSize(14)
-                  .fontFamily('PingFang PingFang SC-Medium')
-                  .fontWeight(500)
-                  .lineHeight(17)
-                  .margin(0)
-                  .height(17)
-                Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)
-                  .fontColor(Color.White)
-                  .fontSize(12)
-                  .fontFamily('PingFang SC-Regular')
-                  .fontWeight(400)
-                  .lineHeight(14)
-                  .height(14)
-                  .textOverflow({ overflow: TextOverflow.Ellipsis })
-                  .margin(0)
-                  .maxLines(1)
-              }
+              })
             }
-            .width('81%')
+            .width('13%')
             .height('100%')
           }
-          .width('74.4%')
-          .height('100%')
-          .margin({
-            top: 0,
-            bottom: 0,
-            left: 16,
-            right: 0
-          })
-          .onClick(() => {
-            if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
-              // 号主页
-              const params: Params = {
-                creatorId: this.contentDetailData.rmhInfo.rmhId,
-                pageID: ''
-              }
-              WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
-            }
-
-          })
 
           Row() {
-            if (this.followStatus == '0') {
-              Button({ type: ButtonType.Normal, stateEffect: true }) {
-                Row() {
-                  Text('+关注').fontSize(12).fontColor(0xffffff)
-                }.alignItems(VerticalAlign.Center)
-              }
-              .borderRadius(4)
-              .backgroundColor('#ED2800')
-              .width(48)
-              .height(24)
-              .onClick(() => {
-                this.handleAccention()
-              })
-            } else {
-              Button({ type: ButtonType.Normal, stateEffect: true }) {
-                Row() {
-                  Text('已关注').fontSize(12).fontColor(0xffffff)
-                }.alignItems(VerticalAlign.Center)
-              }
-              .borderRadius(4)
-              .backgroundColor('#333333')
-              .width(54)
-              .height(24)
-              .onClick(() => {
-                this.handleAccention()
-              })
+            Flex({
+              direction: FlexDirection.Column,
+              justifyContent: FlexAlign.SpaceAround,
+              alignItems: ItemAlign.Start
+            }) {
+              Text(`${this.contentDetailData?.rmhInfo?.rmhName}`)
+                .fontColor(Color.White)
+                .fontSize(14)
+                .fontFamily('PingFang PingFang SC-Medium')
+                .fontWeight(500)
+                .lineHeight(17)
+                .margin(0)
+                .height(17)
+              Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)
+                .fontColor(Color.White)
+                .fontSize(12)
+                .fontFamily('PingFang SC-Regular')
+                .fontWeight(400)
+                .lineHeight(14)
+                .height(14)
+                .textOverflow({ overflow: TextOverflow.Ellipsis })
+                .margin(0)
+                .maxLines(1)
             }
-
           }
-          .justifyContent(FlexAlign.Center)
-          .alignItems(VerticalAlign.Center)
-          .width('21.6%')
+          .width('81%')
           .height('100%')
         }
-        .width('100%')
-        .height(44)
-        .zIndex(10)
-        .margin({ top: `${this.topSafeHeight + 12}px` })
-        .alignRules({
-          top: { anchor: "__container__", align: VerticalAlign.Top },
-          middle: { anchor: "__container__", align: HorizontalAlign.Center }
+        .width('74.4%')
+        .height('100%')
+        .margin({
+          top: 0,
+          bottom: 0,
+          left: 16,
+          right: 0
         })
-        .id('e_attention')
-        .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
-          TransitionEffect.translate({ x: 0, y: `-${this.topSafeHeight + 12}px` })
-        ))
-      }
-
-    }
-    if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {
-      Swiper(this.swiperController) {
-        ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {
-          Swiper(this.swiperControllerItem) {
-            MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
+        .onClick(() => {
+          if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
+            // 号主页
+            const params: Params = {
+              creatorId: this.contentDetailData.rmhInfo.rmhId,
+              pageID: ''
+            }
+            WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
           }
-          .width('100%')
-          .height('100%')
-          .vertical(true)
-          .autoPlay(false)
-          .cachedCount(1)
-          .indicator(false)
-          .displayCount(1)
-          .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
+
+        })
+
+        Row() {
+          if (this.followStatus == '0') {
+            Button({ type: ButtonType.Normal, stateEffect: true }) {
+              Row() {
+                Text('+关注').fontSize(12).fontColor(0xffffff)
+              }.alignItems(VerticalAlign.Center)
             }
-            if (event.type === 1) {
-              // if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
-              if (this.currentOffset > 160) {
-                router.back()
-              }
+            .borderRadius(4)
+            .backgroundColor('#ED2800')
+            .width(48)
+            .height(24)
+            .onClick(() => {
+              this.handleAccention()
+            })
+          } else {
+            Button({ type: ButtonType.Normal, stateEffect: true }) {
+              Row() {
+                Text('已关注').fontSize(12).fontColor(0xffffff)
+              }.alignItems(VerticalAlign.Center)
             }
-          })
-        })
+            .borderRadius(4)
+            .backgroundColor('#333333')
+            .width(54)
+            .height(24)
+            .onClick(() => {
+              this.handleAccention()
+            })
+          }
+
+        }
+        .justifyContent(FlexAlign.Center)
+        .alignItems(VerticalAlign.Center)
+        .width('21.6%')
+        .height('100%')
       }
-      .index(this.swiperIndex)
       .width('100%')
-      .height('100%')
-      .vertical(false)
-      .autoPlay(false)
-      .indicator(false)
-      .displayCount(1)
-      .loop(false)
-      .effectMode(EdgeEffect.None)
-      .id('e_swiper_content')
+      .height(44)
+      .zIndex(10)
+      .margin({ top: `${this.topSafeHeight + 12}px` })
       .alignRules({
-        center: { anchor: "__container__", align: VerticalAlign.Center },
+        top: { anchor: "__container__", align: VerticalAlign.Top },
         middle: { anchor: "__container__", align: HorizontalAlign.Center }
       })
-      .zIndex(1)
-      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
-        this.swiperIndex = targetIndex
-      })
-      .onClick(() => {
-        this.showDownload = !this.showDownload
-      })
-    }
-    if (this.netStatus !== undefined) {
-      EmptyComponent({
-        emptyType: 1, emptyButton: true, retry: () => {
-          this.getContentDetailData()
-        }
-      })
-        .id('e_empty_content')
-        .alignRules({
-          center: { anchor: "__container__", align: VerticalAlign.Center },
-          middle: { anchor: "__container__", align: HorizontalAlign.Center }
-        })
+      .id('e_attention')
+      .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
+        TransitionEffect.translate({ x: 0, y: `-${this.topSafeHeight + 12}px` })
+      ))
     }
-    if (this.isOffLine) {
-      EmptyComponent({
-        emptyType: 15, emptyButton: true, retry: () => {
-          this.getContentDetailData
+  }
+
+  @Builder
+  imgSwiper() {
+    Swiper(this.swiperController) {
+      ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {
+        Swiper(this.swiperControllerItem) {
+          MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
         }
-      })
-        .id('e_empty_content')
-        .alignRules({
-          center: { anchor: "__container__", align: VerticalAlign.Center },
-          middle: { anchor: "__container__", align: HorizontalAlign.Center }
+        .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)
         })
-        .backgroundColor(Color.Black)
-    }
-    Column() {
-      if (!this.showDownload) {
-        Column() {
-          Row() {
-            Scroll(this.scroller) {
-              Row() {
-                Flex({
-                  direction: FlexDirection.Column,
-                  justifyContent: FlexAlign.Start
-                }) {
-                  if (this.contentDetailData?.photoList?.length) {
-                    Text() {
-                      Span(`${this.swiperIndex + 1}`)
-                        .fontSize(24)
-                        .fontFamily('PingFang SC-Medium')
-                        .fontWeight(500)
-                        .lineHeight(28)
-                      Span(`/${this.contentDetailData?.photoList?.length}`)
-                        .fontSize(14)
-                        .fontFamily('PingFang SC-Medium')
-                        .fontWeight(500)
-                        .lineHeight(19)
-                    }
-                    .fontColor(Color.White)
-                    .margin({
-                      top: 4,
-                      left: 18,
-                      bottom: 4,
-                      right: 4
-                    })
-                  }
-                  if (this.contentDetailData.newsTitle) {
-                    Text(`${this.contentDetailData.newsTitle}`)
-                      .fontColor(Color.White)
-                      .fontSize(16)
-                      .fontFamily('PingFang SC-Semibold')
-                      .fontWeight(600)
-                      .lineHeight(24)
-                      .margin({
-                        top: 4,
-                        left: 18,
-                        bottom: 4,
-                        right: 18
-                      })
-                  }
-                  if (this.contentDetailData.photoList?.[this.swiperIndex].picDesc) {
-                    Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
-                      .fontColor(Color.White)
-                      .fontSize(14)
-                      .fontFamily('PingFang SC-Regular')
-                      .fontWeight(400)
-                      .lineHeight(22)
-                      .textOverflow({ overflow: TextOverflow.Ellipsis })
-                      .margin({
-                        top: 4,
-                        left: 0,
-                        bottom: 4,
-                        right: 18
-                      })
-                      .maxLines(32)
-                  }
-                }
-              }
-              .width('100%')
-            }
-            .scrollable(ScrollDirection.Vertical)
-            .scrollBarWidth(0)
-            .height(px2vp(this.titleHeight))
-            .align(Alignment.Bottom)
+        .onTouch((event: TouchEvent) => {
+          if (this.duration === 0) {
+            this.duration = 500
           }
-
-          OperRowListView({
-            contentDetailData: this.contentDetailData,
-            publishCommentModel: this.publishCommentModel,
-            operationButtonList: this.operationButtonList,
-            styleType: 2,
-            componentType: 5,
-            pageComponentType: 3,
-            onCommentIconClick: () => {
-              this.showCommentList = true
+          if (event.type === 1) {
+            // if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
+            if (this.currentOffset > 160) {
+              router.back()
             }
-          })
+          }
+        })
+      })
+    }
+    .index(this.swiperIndex)
+    .width('100%')
+    .height('100%')
+    .vertical(false)
+    .autoPlay(false)
+    .indicator(false)
+    .displayCount(1)
+    .loop(false)
+    .effectMode(EdgeEffect.Spring)
+    .id('e_swiper_content')
+    .alignRules({
+      center: { anchor: "__container__", align: VerticalAlign.Center },
+      middle: { anchor: "__container__", align: HorizontalAlign.Center }
+    })
+    .zIndex(1)
+    .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
+      this.swiperIndex = targetIndex
+    })
+    .onClick(() => {
+      this.showDownload = !this.showDownload
+    })
+  }
 
-        }
-        .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
-          TransitionEffect.translate({ x: 0, y: `-${this.bottomSafeHeight}px` })
-        ))
-      }
-      if (this.showDownload) {
-        Column() {
+  @Builder
+  NShowDownload() {
+    Column() {
+      Row() {
+        Scroll(this.scroller) {
           Row() {
             Flex({
-              direction: FlexDirection.Row,
-              justifyContent: FlexAlign.SpaceBetween
+              direction: FlexDirection.Column,
+              justifyContent: FlexAlign.Start
             }) {
               if (this.contentDetailData?.photoList?.length) {
                 Text() {
@@ -463,38 +380,148 @@ export struct MultiPictureDetailPageComponent {
                     .lineHeight(19)
                 }
                 .fontColor(Color.White)
-                .margin(4)
+                .margin({
+                  top: 4,
+                  left: 18,
+                  bottom: 4,
+                  right: 4
+                })
               }
-
-              if (this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
-                ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
+              if (this.contentDetailData.newsTitle) {
+                Text(`${this.contentDetailData.newsTitle}`)
+                  .fontColor(Color.White)
+                  .fontSize(16)
+                  .fontFamily('PingFang SC-Semibold')
+                  .fontWeight(600)
+                  .lineHeight(24)
                   .margin({
-                    top: 8,
+                    top: 4,
                     left: 18,
-                    bottom: 24,
+                    bottom: 4,
+                    right: 18
+                  })
+              }
+              if (this.contentDetailData.photoList?.[this.swiperIndex].picDesc) {
+                Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
+                  .fontColor(Color.White)
+                  .fontSize(14)
+                  .fontFamily('PingFang SC-Regular')
+                  .fontWeight(400)
+                  .lineHeight(22)
+                  .textOverflow({ overflow: TextOverflow.Ellipsis })
+                  .margin({
+                    top: 4,
+                    left: 0,
+                    bottom: 4,
                     right: 18
                   })
-                  .parallelGesture(
-                    TapGesture()
-                      .onAction((event: GestureEvent) => {
-                        TrackingContent.download(1,TrackConstants.PageName.Atlas_Detail,TrackConstants.PageName.Atlas_Detail,this.pageParam)
-                      }))
+                  .maxLines(32)
               }
             }
           }
           .width('100%')
         }
-        .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
-          TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` })
-        ))
+        .scrollable(ScrollDirection.Vertical)
+        .scrollBarWidth(0)
+        .constraintSize({
+          maxHeight: px2vp(this.titleHeight)
+        })
+        .align(Alignment.Bottom)
       }
+
+      OperRowListView({
+        contentDetailData: this.contentDetailData,
+        publishCommentModel: this.publishCommentModel,
+        operationButtonList: this.operationButtonList,
+        styleType: 2,
+        componentType: 5,
+        pageComponentType: 3,
+        onCommentIconClick: () => {
+          this.showCommentList = true
+        }
+      })
+
     }
-    .zIndex(10)
-    .id('e_swiper_bottom')
-    .alignRules({
-      bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
-      middle: { anchor: "__container__", align: HorizontalAlign.Center }
+    .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
+      TransitionEffect.translate({ x: 0, y: `-${this.bottomSafeHeight}px` })
+    ))
+  }
+
+  @Builder
+  YShowDownload() {
+    Column() {
+      Row() {
+        Flex({
+          direction: FlexDirection.Row,
+          justifyContent: FlexAlign.SpaceBetween
+        }) {
+          if (this.contentDetailData?.photoList?.length) {
+            Text() {
+              Span(`${this.swiperIndex + 1}`)
+                .fontSize(24)
+                .fontFamily('PingFang SC-Medium')
+                .fontWeight(500)
+                .lineHeight(28)
+              Span(`/${this.contentDetailData?.photoList?.length}`)
+                .fontSize(14)
+                .fontFamily('PingFang SC-Medium')
+                .fontWeight(500)
+                .lineHeight(19)
+            }
+            .fontColor(Color.White)
+            .margin(4)
+          }
+
+          if (this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
+            ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
+              .margin({
+                top: 8,
+                left: 18,
+                bottom: 24,
+                right: 18
+              })
+              .parallelGesture(
+                TapGesture()
+                  .onAction((event: GestureEvent) => {
+                    TrackingContent.download(1,TrackConstants.PageName.Atlas_Detail,TrackConstants.PageName.Atlas_Detail,this.pageParam)
+                  }))
+          }
+        }
+      }
+      .width('100%')
+    }
+    .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
+      TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` })
+    ))
+  }
+
+  @Builder
+  noNet() {
+    EmptyComponent({
+      emptyType: 1, emptyButton: true, retry: () => {
+        this.getContentDetailData()
+      }
+    })
+      .id('e_empty_content')
+      .alignRules({
+        center: { anchor: "__container__", align: VerticalAlign.Center },
+        middle: { anchor: "__container__", align: HorizontalAlign.Center }
+      })
+  }
+
+  @Builder
+  offLine() {
+    EmptyComponent({
+      emptyType: 15, emptyButton: true, retry: () => {
+        this.getContentDetailData
+      }
     })
+      .id('e_empty_content')
+      .alignRules({
+        center: { anchor: "__container__", align: VerticalAlign.Center },
+        middle: { anchor: "__container__", align: HorizontalAlign.Center }
+      })
+      .backgroundColor(Color.Black)
   }
 
   getContentDetailData() {