HarmonyOS 鸿蒙Next 左滑加载更多怎么实现

实现onAction(event:(event: GestureEvent) => void)监听，回调对象GestureEvent可以区分左右

参考文档

1、SwipeGesture使用说明

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-gestures-swipegesture-V5

2、GestureEvent参数说明

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-gesture-settings-V5#ZH-CN_TOPIC_0000001930676517__gestureevent%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E

offsetX number 手势事件偏移量X，单位为vp，用于PanGesture手势触发场景，从左向右滑动offsetX为正，反之为负。

可以通过 左滑右滑的正负和图片数量 显示 加载更多选项

参考demo：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct listMorePage {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@Builder
moreBuilder() {
Text(‘查看更多’)
.height(‘100%’)
.textAlign(TextAlign.Center)
.fontColor(0xFFFFFF)
.fontSize(‘13fp’)
.backgroundColor($r(‘sys.color.ohos_id_color_badge_red’))
.padding({
left: ‘18vp’,
right: ‘18vp’
})
}
build() {
List({ space: <span class="hljs-number">20</span>, initialIndex: <span class="hljs-number">0</span> }) {
  ListItem() {
    Row() {
      Text(<span class="hljs-string">'Header'</span>)
    }
  }
  .width(<span class="hljs-string">'100%'</span>)
  .height(<span class="hljs-string">'100vp'</span>)
  .backgroundColor(<span class="hljs-string">'#FFFFFF'</span>)

  ListItem() {
    List({ space: <span class="hljs-number">20</span>, initialIndex: <span class="hljs-number">0</span> }) {
      ForEach(<span class="hljs-keyword">this</span>.arr, (item: number) =&gt; {
        ListItem() {
          Text(<span class="hljs-string">''</span> + item)
            .height(<span class="hljs-number">100</span>)
            .fontSize(<span class="hljs-number">16</span>)
            .textAlign(TextAlign.Center)
            .backgroundColor(<span class="hljs-number">0xFFFFFF</span>)
            .width(<span class="hljs-string">'100%'</span>)
            .height(<span class="hljs-number">180</span>)
        }
        .width(<span class="hljs-string">'100%'</span>)
        .swipeAction({ end:<span class="hljs-keyword">this</span>.moreBuilder() , edgeEffect: SwipeEdgeEffect.None })
      })
    }
    .padding({
      left: <span class="hljs-string">'14vp'</span>,
      right: <span class="hljs-string">'14vp'</span>
    })
    .backgroundColor(<span class="hljs-number">0x000000</span>)
  }
}
.backgroundColor(<span class="hljs-number">0x000000</span>)
}
}