HarmonyOS鸿蒙Next中半模态框中使用列表组件，如何实现下滑滚动到顶部后，继续下滑可以下滑关闭模态框

【背景知识】

• List：List是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。
• onTouch：手指触摸动作触发该回调。鼠标左键按下时对应的事件也会转化成触摸事件并触发该回调。

【解决方案】 可以使用onTouch来监听：

class ListDataSource implements IDataSource {
  private list: number[] = [];
  private listeners: DataChangeListener[] = [];

  constructor(list: number[]) {
    this.list = list;
  }

  totalCount(): number {
    return this.list.length;
  }

  getData(index: number): number {
    return this.list[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }



}
@Entry
@Component
struct bindSheetExample {
  @State isShow: boolean = false;
  private arr: ListDataSource = new ListDataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
  @State isStart: boolean = false;
  private touchStartY: number = 0; // 触摸起始位置

  @Builder
  myBuilder() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        LazyForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(Color.Blue)
          }
        }, (item: number) => item.toString())
      }
      .edgeEffect(EdgeEffect.None)
      .onReachStart(()=>{
        this.isStart = true
      })
      .onTouch((event: TouchEvent)=>{
        const currentY = event.touches[0].y;
        switch (event.type) {
          case TouchType.Down:
            this.touchStartY = currentY;
            break;
          case TouchType.Move:
            // 记录移动的方向，正值为下滑，负值为上滑
            const deltaY = currentY - this.touchStartY;
            if(this.isStart&&deltaY>0){
              this.isShow = false
            }else{
              this.isStart = false
            }
            break;
          case TouchType.Up:
            break;
            }
        })
      .scrollBar(BarState.On)
      .height('100%')

    }
  }

  build() {
    Column() {
      Button("xxxxx")
        .onClick(() => {
          this.isShow = true;
          this.isStart = true;
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(), {
          height: SheetSize.MEDIUM,
          blurStyle: BlurStyle.Thick,
          showClose: true,
          title: { title: "xxxxx"},
          preferType: SheetType.CENTER,
          keyboardAvoidMode: SheetKeyboardAvoidMode.RESIZE_ONLY,
        })
    }
  }
}

【背景知识】

• Scroll可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
  • currentOffset获取Scroll当前的偏移量。
  • isAtEnd查询Scroll是否滚动到底部。
• PanGesture可以为组件绑定滑动手势事件，其中手势回调的event.offsetY在从上向下滑动为正，反之为负。

【解决方案】

class ListDataSource implements IDataSource {

  private list: number[] = [];

  private listeners: DataChangeListener[] = [];

  constructor(list: number[]) {

    this.list = list;

  }

  totalCount(): number {

    return this.list.length;

  }

  getData(index: number): number {

    return this.list[index];

  }

  registerDataChangeListener(listener: DataChangeListener): void {

    if (this.listeners.indexOf(listener) < 0) {

      this.listeners.push(listener);

    }

  }

  unregisterDataChangeListener(listener: DataChangeListener): void {

    const pos = this.listeners.indexOf(listener);

    if (pos >= 0) {

      this.listeners.splice(pos, 1);

    }

  }

}

@Entry

@Component

struct bindSheetExample {

  @State isShow: boolean = false;

  private arr: ListDataSource = new ListDataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Vertical })

  private scrollerForScroll: Scroller = new Scroller()

  @Builder

  myBuilder() {

    Column() {

      Scroll(this.scrollerForScroll){

        List({ space: 20, initialIndex: 0 }) {

          LazyForEach(this.arr, (item: number) => {

            ListItem() {

              Text('' + item)

                .width('100%').height(100).fontSize(16)

                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(Color.Blue)

            }

          }, (item: number) => item.toString())

        }

        .scrollBar(BarState.On)

      }

      .edgeEffect(EdgeEffect.Spring)

      .height('100%')

      .parallelGesture(

        PanGesture(this.panOption)

          .onActionStart((event: GestureEvent) => {

            console.info('Pan start')

          })

          .onActionUpdate((event: GestureEvent) => {

            // 滑动过程中会持续触发此方法

          })

          .onActionEnd((event: GestureEvent) => {

            // 滑动到底部并且继续滑动

            if (this.scrollerForScroll.isAtEnd() && event.offsetY < 0) {

              this.isShow=false

            }

            // 滑动到顶部并且继续滑动

            const offsetRes = this.scrollerForScroll.currentOffset() // 获取Scroll现在的位置

            if (offsetRes.yOffset <= 0 && event.offsetY > 0) {

              console.info("执行自定义操作2")

            }

          }), GestureMask.Normal)

    }

  }

  build() {

    Column() {

      Button("xxxxx")

        .onClick(() => {

          this.isShow = true;

        })

        .fontSize(20)

        .margin(10)

        .bindSheet($$this.isShow, this.myBuilder(), {

          height: SheetSize.MEDIUM,

          blurStyle: BlurStyle.Thick,

          showClose: true,

          title: { title: "xxxxx"},

          preferType: SheetType.CENTER,

          keyboardAvoidMode: SheetKeyboardAvoidMode.RESIZE_ONLY,

        })

    }

  }

}