feat: 滑动松手查看功能未实现

@@ -19,14 +19,67 @@ export struct ZhSingleRow02 {
   @State pageId: string = '';
   @State pageName: string = '';
   @State compDTO: CompDTO = {} as CompDTO
+  @State initMoreWidth: number = 16;
+  @State moreWidth:number = 16
+  @State moreTips: string = ''
+  scroller: Scroller = new Scroller()
+
+  resetMoreTips() {
+    console.log('resetMoreTips', this.moreWidth, this.initMoreWidth)
+    if (this.moreWidth < this.initMoreWidth * 2) {
+      this.moreTips = '查看更多';
+    }
+  }
+
+  edgeAnimation() {
+    if (this.moreWidth < this.initMoreWidth * 3) {
+      if (!this.moreTips) {
+        this.moreTips = '查看更多';
+      }
+      this.moreWidth = this.moreWidth + 2
+    }
+    if (this.moreWidth > this.initMoreWidth * 2) {
+      this.moreTips = '松手查看';
+    } else {
+
+    }
+  }
+
+  reverseEdgeAnimation() {
+    if (this.moreWidth > this.initMoreWidth) {
+      this.moreWidth = this.moreWidth - 2
+    }
+    this.resetMoreTips()
+  }
+
+  resetEdgeAnimation() {
+    if (this.moreWidth > this.initMoreWidth) {
+      this.moreWidth = this.moreWidth - 1
+      this.resetEdgeAnimation();
+    }
+    this.resetMoreTips()
+  }
+
+  toMore() {
+    if (this.moreWidth > this.initMoreWidth * 2) {
+      if (this.compDTO?.objectType === '11') {
+        ProcessUtils.jumpChannelTab(this.compDTO.objectId, this.compDTO.pageId as string, this.compDTO.objectTitle)
+      } else if (this.compDTO?.objectType === '5') {
+        ProcessUtils._gotoSpecialTopic(this.compDTO.linkUrl)
+      } else if (this.compDTO?.objectType === '6') {
+        ProcessUtils._gotoDefaultWeb(this.compDTO.linkUrl)
+      }
+    }
+  }
 
   build() {
     Column() {
       //顶部
       this.CompHeader(this.compDTO)
-      Row(){
       // 列表内容
-        List() {
+      Scroll(this.scroller) {
+        Row() {
+          Row() {
             ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
               CreatorItem({
                 item,
@@ -35,15 +88,52 @@ export struct ZhSingleRow02 {
                 pageId: this.pageId,
                 pageName: this.pageName
               })
-              .margin({right: index === this.compDTO.operDataList.length - 1 ? $r('app.float.card_comp_pagePadding_lf') : 0})
+                .margin({ right: 8 })
             })
           }
-        .listDirection(Axis.Horizontal)
-        .scrollBar(BarState.Off)
-        .edgeEffect(EdgeEffect.None)
+          if (this.compDTO.operDataList.length > 2) {
+            Column() {
+              if (this.moreWidth > this.initMoreWidth + 2) {
+                Text(this.moreTips)
+                  .fontSize(8)
+                  .fontColor(0x858585)
+                  .width(8)
+              }
+            }
+            .justifyContent(FlexAlign.Center)
+            .align(Alignment.Center)
+            .height('100%')
+            .width(this.moreWidth)
+            .backgroundColor(0xe9e9e9)
+            .borderRadius({ topLeft: 5, bottomLeft: 5 })
+          }
+        }
       }
       .width(CommonConstants.FULL_WIDTH)
       .height(208)
+      .align(Alignment.Start)
+      .scrollable(this.compDTO.operDataList.length > 2 ? ScrollDirection.Horizontal : ScrollDirection.None)
+      .scrollBar(BarState.Off)
+      .edgeEffect(EdgeEffect.None)
+      .onReachEnd(() => {
+        this.edgeAnimation()
+      })
+      .onScrollStop(() => {
+        // this.resetEdgeAnimation();
+      })
+      .onScroll((xOffset: number, yOffset: number) => {
+        if (xOffset < 0) {
+          this.reverseEdgeAnimation();
+        }
+      })
+      .onTouch((event?: TouchEvent) => {
+        if(event) {
+          if (event.type === TouchType.Up) {
+            this.toMore();
+            this.resetEdgeAnimation();
+          }
+        }
+      })
     }
     .padding({
       left: $r('app.float.card_comp_pagePadding_lf'),
@@ -126,6 +216,7 @@ struct CreatorItem {
             .width(156)
             .height(208)
             .backgroundColor(0xf5f5f5)
+            .borderRadius(5)
 
           Row()
             .width(156)
@@ -134,6 +225,7 @@ struct CreatorItem {
               direction: GradientDirection.Bottom,
               colors: [['rgba(0, 0, 0, 0.0)', 0.0], ['rgba(0, 0, 0, 0.3)', 1.0]]
             })
+            .borderRadius(5)
           Text(this.item.newsTitle)
             .fontColor(0xffffff)
             .fontSize(14)
@@ -145,7 +237,6 @@ struct CreatorItem {
       }
       .width(156)
       .height(208)
-      .margin({ right: 11 })
       .borderColor($r('app.color.color_EDEDED'))
       .borderRadius($r('app.float.image_border_radius'))
     }

@@ -29,17 +29,61 @@ export struct ZhSingleRow03 {
   @State pageId: string = '';
   @State pageName: string = '';
   @State compDTO: CompDTO = {} as CompDTO
-  @State isEndEdge: boolean = false;
   // @State reserveStatus: reserveItem[] = []
   @State reservedIds: string[] = [];
   @State loadImg: boolean = false;
+  @State initMoreWidth: number = 16;
+  @State moreWidth:number = 16
+  @State moreTips: string = ''
+  scroller: Scroller = new Scroller()
+
+  resetMoreTips() {
+    console.log('resetMoreTips', this.moreWidth, this.initMoreWidth)
+    if (this.moreWidth < this.initMoreWidth * 2) {
+      this.moreTips = '查看更多';
+    }
+  }
+
+  edgeAnimation() {
+    if (this.moreWidth < this.initMoreWidth * 3) {
+      if (!this.moreTips) {
+        this.moreTips = '查看更多';
+      }
+      this.moreWidth = this.moreWidth + 2
+    }
+    if (this.moreWidth > this.initMoreWidth * 2) {
+      this.moreTips = '松手查看';
+    } else {
+
+    }
+  }
+
+  reverseEdgeAnimation() {
+    if (this.moreWidth > this.initMoreWidth) {
+      this.moreWidth = this.moreWidth - 2
+    }
+    this.resetMoreTips()
+  }
+
+  resetEdgeAnimation() {
+    if (this.moreWidth > this.initMoreWidth) {
+      this.moreWidth = this.moreWidth - 1
+      this.resetEdgeAnimation();
+    }
+    this.resetMoreTips()
+  }
+
+  toMore() {
+    if (this.moreWidth > this.initMoreWidth * 2) {
+      this.jumpToMore()
+    }
+  }
 
   async aboutToAppear(): Promise<void> {
     this.getReserveState();
     this.loadImg = await onlyWifiLoadImg();
   }
 
-  scroller: Scroller = new Scroller()
 
   // 请求所有预约状态
   async getReserveState() {
@@ -106,25 +150,51 @@ export struct ZhSingleRow03 {
 
       Scroll(this.scroller){
         Row() {
+          Row() {
             ForEach(this.compDTO.operDataList, (item: ContentDTO) => {
               this.ItemCard(item)
             })
           }
+          if (this.compDTO.operDataList.length > 2) {
+            Column() {
+              if (this.moreWidth > this.initMoreWidth + 2) {
+                Text(this.moreTips)
+                  .fontSize(8)
+                  .fontColor(0x858585)
+                  .width(8)
               }
-      .scrollable(ScrollDirection.Horizontal)
-      .scrollBar(BarState.Off)
-      .onScrollEdge((side: Edge) => {
-        if (side === Edge.End) {
-          this.isEndEdge = true;
             }
+            .justifyContent(FlexAlign.Center)
+            .align(Alignment.Center)
+            .width(this.moreWidth)
+            .backgroundColor(0xf9f9f9)
+            .borderRadius({ topLeft: 5, bottomLeft: 5 })
+            .height(116)
+          }
+        }
+      }
+      .align(Alignment.Start)
+      .scrollable(this.compDTO.operDataList.length > 2 ? ScrollDirection.Horizontal : ScrollDirection.None)
+      .scrollBar(BarState.Off)
+      .edgeEffect(EdgeEffect.None)
+      .onReachEnd(() => {
+        this.edgeAnimation()
       })
       .onScrollStop(() => {
-        if (this.isEndEdge) {
-          this.jumpToMore();
-        }
+        // this.resetEdgeAnimation();
       })
       .onScroll((xOffset: number, yOffset: number) => {
-        this.isEndEdge = false;
+        if (xOffset < 0) {
+          this.reverseEdgeAnimation();
+        }
+      })
+      .onTouch((event?: TouchEvent) => {
+        if(event) {
+          if (event.type === TouchType.Up) {
+            this.toMore();
+            this.resetEdgeAnimation();
+          }
+        }
       })
     }
     .padding({

@@ -8,6 +8,62 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
   @State compDTO: CompDTO = {} as CompDTO
   @State pageId: string = '';
   @State pageName: string = '';
+  @State initMoreWidth: number = 16;
+  @State moreWidth:number = 16
+  @State moreTips: string = ''
+  scroller: Scroller = new Scroller()
+
+  resetMoreTips() {
+    console.log('resetMoreTips', this.moreWidth, this.initMoreWidth)
+    if (this.moreWidth < this.initMoreWidth * 2) {
+      this.moreTips = '查看更多';
+    }
+  }
+
+  edgeAnimation() {
+    if (this.moreWidth < this.initMoreWidth * 3) {
+      if (!this.moreTips) {
+        this.moreTips = '查看更多';
+      }
+      this.moreWidth = this.moreWidth + 2
+    }
+    if (this.moreWidth > this.initMoreWidth * 2) {
+      this.moreTips = '松手查看';
+    } else {
+
+    }
+  }
+
+  reverseEdgeAnimation() {
+    if (this.moreWidth > this.initMoreWidth) {
+      this.moreWidth = this.moreWidth - 2
+    }
+    this.resetMoreTips()
+  }
+
+  resetEdgeAnimation() {
+    if (this.moreWidth > this.initMoreWidth) {
+      this.moreWidth = this.moreWidth - 1
+      this.resetEdgeAnimation();
+    }
+    this.resetMoreTips()
+  }
+
+  toMore() {
+    if (this.moreWidth > this.initMoreWidth * 2) {
+      if (this.compDTO.linkUrl) {
+        let taskAction: Action = {
+          type: 'JUMP_H5_BY_WEB_VIEW',
+          params: {
+            url: this.compDTO.linkUrl
+          } as Params,
+        };
+        WDRouterRule.jumpWithAction(taskAction)
+      } else {
+        this.jumpToLiveMorePage()
+      }
+    }
+  }
 
   build() {
     Column() {
@@ -53,10 +109,10 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
       .width('100%')
 
       // .backgroundColor($r("app.color.white"))
-      List({ space: 12 }) {
-
+      Scroll(this.scroller) {
+        Row() {
+          Row() {
             ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
-          ListItem() {
               Column() {
                 Image(item.coverUrl)
                   .aspectRatio(1.5)
@@ -75,18 +131,56 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
                   .width(150)
                   .lineHeight(19)
               }
-          }
-          .padding({ left: (index == 0) ? 16 : 0, right: (index == this.compDTO.operDataList.length - 1) ? 16 : 0 })
+              .padding({ left: (index == 0) ? 16 : 0, right: 16 })
               // .offset({x:16})
               .onClick(() => {
                 InfomationCardClick.track(this.compDTO, item, this.pageId, this.pageName)
                 ProcessUtils.processPage(item)
               })
             })
-
-      }.listDirection(Axis.Horizontal)
+          }
+          if (this.compDTO.operDataList.length > 2) {
+            Column() {
+              if (this.moreWidth > this.initMoreWidth + 2) {
+                Text(this.moreTips)
+                  .fontSize(8)
+                  .fontColor(0x858585)
+                  .width(8)
+              }
+            }
+            .justifyContent(FlexAlign.Center)
+            .align(Alignment.Center)
+            .width(this.moreWidth)
+            .backgroundColor(0xf1f3f4)
+            .borderRadius({ topLeft: 5, bottomLeft: 5 })
+            .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
+          }
+        }
+      }
+      .align(Alignment.Start)
+      .scrollable(this.compDTO.operDataList.length > 2 ? ScrollDirection.Horizontal : ScrollDirection.None)
       .scrollBar(BarState.Off)
-      .width('100%')
+      .edgeEffect(EdgeEffect.None)
+      .onReachEnd(() => {
+        this.edgeAnimation()
+      })
+      .onScrollStop(() => {
+        // this.resetEdgeAnimation();
+      })
+      .onScroll((xOffset: number, yOffset: number) => {
+        if (xOffset < 0) {
+          this.reverseEdgeAnimation();
+        }
+      })
+      .onTouch((event?: TouchEvent) => {
+        if(event) {
+          if (event.type === TouchType.Up) {
+            this.toMore();
+            this.resetEdgeAnimation();
+          }
+        }
+      })
+      // .width('100%')
 
       // .backgroundColor($r("app.color.color_FE4B05"))
       // .padding({left:16,right:16})

@@ -18,6 +18,62 @@ export struct LiveHorizontalCardComponent {
   @State pageName: string = '';
   @State compDTO: CompDTO = {} as CompDTO
   @State loadImg: boolean = false;
+  @State initMoreWidth: number = 16;
+  @State moreWidth:number = 16
+  @State moreTips: string = ''
+  scroller: Scroller = new Scroller()
+
+  resetMoreTips() {
+    console.log('resetMoreTips', this.moreWidth, this.initMoreWidth)
+    if (this.moreWidth < this.initMoreWidth * 2) {
+      this.moreTips = '查看更多';
+    }
+  }
+
+  edgeAnimation() {
+    if (this.moreWidth < this.initMoreWidth * 3) {
+      if (!this.moreTips) {
+        this.moreTips = '查看更多';
+      }
+      this.moreWidth = this.moreWidth + 2
+    }
+    if (this.moreWidth > this.initMoreWidth * 2) {
+      this.moreTips = '松手查看';
+    } else {
+
+    }
+  }
+
+  reverseEdgeAnimation() {
+    if (this.moreWidth > this.initMoreWidth) {
+      this.moreWidth = this.moreWidth - 2
+    }
+    this.resetMoreTips()
+  }
+
+  resetEdgeAnimation() {
+    if (this.moreWidth > this.initMoreWidth) {
+      this.moreWidth = this.moreWidth - 1
+      this.resetEdgeAnimation();
+    }
+    this.resetMoreTips()
+  }
+
+  toMore() {
+    if (this.moreWidth > this.initMoreWidth * 2) {
+      if (this.compDTO.linkUrl) {
+        let taskAction: Action = {
+          type: 'JUMP_H5_BY_WEB_VIEW',
+          params: {
+            url: this.compDTO.linkUrl
+          } as Params,
+        };
+        WDRouterRule.jumpWithAction(taskAction)
+      } else {
+        this.jumpToLiveMorePage()
+      }
+    }
+  }
 
   async aboutToAppear(): Promise<void> {
     this.loadImg = await onlyWifiLoadImg();
@@ -69,9 +125,10 @@ export struct LiveHorizontalCardComponent {
 
       // 多个
       if (this.compDTO.operDataList.length >= 2) {
-        List({ space: 12 }) {
+        Scroll(this.scroller) {
+          Row() {
+            Row() {
               ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
-            ListItem() {
                 Column() {
                   Stack({ alignContent: Alignment.BottomEnd }) {
                     Image(this.loadImg ? item.coverUrl : '')
@@ -96,8 +153,7 @@ export struct LiveHorizontalCardComponent {
                     .margin({ top: 8 })
                     .width(this.compDTO.operDataList.length == 2 ? 210 : 150)
                 }
-            }
-            .padding({ left: (index == 0) ? 16 : 0, right: (index == this.compDTO.operDataList.length - 1) ? 16 : 0 })
+                .padding({ left: (index == 0) ? 16 : 0, right: 16 })
                 .onClick(() => {
                   InfomationCardClick.track(this.compDTO, item, this.pageId, this.pageName)
                   if (item.objectType != '0') {
@@ -107,8 +163,47 @@ export struct LiveHorizontalCardComponent {
                 })
               })
             }
-        .listDirection(Axis.Horizontal)
+            if (this.compDTO.operDataList.length > 2) {
+              Column() {
+                if (this.moreWidth > this.initMoreWidth + 2) {
+                  Text(this.moreTips)
+                    .fontSize(8)
+                    .fontColor(0x858585)
+                    .width(8)
+                }
+              }
+              .justifyContent(FlexAlign.Center)
+              .align(Alignment.Center)
+              .width(this.moreWidth)
+              .backgroundColor(0xf1f3f4)
+              .borderRadius({ topLeft: 5, bottomLeft: 5 })
+              .height(this.compDTO.operDataList.length == 2 ? 180 : 146)
+            }
+          }
+        }
+        .align(Alignment.Start)
+        .scrollable(this.compDTO.operDataList.length > 2 ? ScrollDirection.Horizontal : ScrollDirection.None)
         .scrollBar(BarState.Off)
+        .edgeEffect(EdgeEffect.None)
+        .onReachEnd(() => {
+          this.edgeAnimation()
+        })
+        .onScrollStop(() => {
+          // this.resetEdgeAnimation();
+        })
+        .onScroll((xOffset: number, yOffset: number) => {
+          if (xOffset < 0) {
+            this.reverseEdgeAnimation();
+          }
+        })
+        .onTouch((event?: TouchEvent) => {
+          if(event) {
+            if (event.type === TouchType.Up) {
+              this.toMore();
+              this.resetEdgeAnimation();
+            }
+          }
+        })
         .width(CommonConstants.FULL_WIDTH)
         .height(this.compDTO.operDataList.length == 2 ? 180 : 136)
       } else if (this.compDTO.operDataList.length) {