鸿蒙实现右滑加载更多

dart 复制代码
@Entry
@Component
struct Index {
  build() {
    Stack({ alignContent: Alignment.Start }) {
      TabRightMore({ totalSize: 4 }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Red)
        }

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Black)
        }
      }
    }
    .height('100%')
    .width('100%')
  }
}

@ComponentV2
struct TabRightMore {
  @Require @Param totalSize: number = 0
  private innerSelectedIndex = 0
  private listScroller: ListScroller = new ListScroller()
  private LAST_INDEX = this.totalSize - 1

  @Monitor('totalSize')
  watchTotalSize() {
    this.LAST_INDEX = this.totalSize - 1
  }

  @Builder
  closerBuilder() {
  }

  // 使用父组件的尾随闭包{}(@Builder装饰的方法)初始化子组件@BuilderParam
  @BuilderParam closer: () => void = this.closerBuilder;

  build() {
    Stack({ alignContent: Alignment.Start }) {
      List({scroller: this.listScroller}) {
        ListItem() {
          Tabs() {
            this.closer()
          }
          .animationDuration(0)
          .edgeEffect(EdgeEffect.None)
          .onAnimationStart((index: number, targetIndex: number) => {
            console.info('ets onGestureRecognizerJudgeBegin child:' + targetIndex)
            this.innerSelectedIndex = targetIndex
          })
          .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer, others: Array<GestureRecognizer>): GestureJudgeResult => { // 在识别器即将要成功时，根据当前组件状态，设置识别器使能状态
            if (current) {
              let target = current.getEventTargetInfo();
              if (target && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN_GESTURE) {
                let panEvent = event as PanGestureEvent;
                if (panEvent && panEvent.velocityX < 0 && this.innerSelectedIndex === this.LAST_INDEX) { // 内层Tabs滑动到尽头
                  return GestureJudgeResult.REJECT;
                }
                if (panEvent && panEvent.velocityX > 0 && this.innerSelectedIndex === 0) { // 内层Tabs滑动到开头
                  return GestureJudgeResult.REJECT;
                }
              }
            }
            return GestureJudgeResult.CONTINUE;
          }, true)
          .barHeight(0)
          .barWidth(0)
          .backgroundColor(Color.Gray)
          .width('100%')
          .height('100%')
        }

        ListItem() {
          Column()
            .backgroundColor(Color.Orange)
            .height('100%')
            .width(100)
        }
      }
      .listDirection(Axis.Horizontal)
      .width('100%')
      .height(200)
      .edgeEffect(EdgeEffect.None)
      .scrollBar(BarState.Off)
      .onTouch((event) => {
        if (event.type === TouchType.Down) {
          console.log('Index000 TouchType.Down')
        } else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
          console.log('Index000 TouchType.Up Cancel ' + this.listScroller.currentOffset().xOffset)
          this.listScroller.scrollTo({ xOffset: 0, yOffset: 0, animation: true })
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}