鸿蒙实现右滑加载更多

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%')
  }
}
相关推荐
LucianaiB15 小时前
【案例实战】基于分布式能力的跨设备任务协同应用开发
harmonyos·鸿蒙·1024程序员节·案例实战
SWUT胖虎2 天前
ArkTS 自定义组件与 @Builder 区别总结
harmonyos·arkts·鸿蒙
SWUT胖虎2 天前
ArkTS 中 @State 底层原理详解
java·list·harmonyos·鸿蒙
SWUT胖虎2 天前
AlphabetIndexer组件 与 List 联动总结
list·harmonyos·arkts·鸿蒙
鸿蒙小白龙2 天前
OpenHarmony轻量级内核LiteOS-M技术详解与应用实践
harmonyos·鸿蒙·鸿蒙系统·open harmony
Damon小智2 天前
HarmonyOS应用开发-低代码开发登录页面(超详细)
低代码·harmonyos·鸿蒙·登录·arcts·arcui·griditem
LucianaiB3 天前
【成长纪实】从“Hello World”到分布式实战的进阶之路
harmonyos·鸿蒙·成长纪实
逻极4 天前
HarmonyOS 5 鸿蒙多设备适配与分布式开发指南
分布式·华为·harmonyos·鸿蒙
鸿蒙小白龙4 天前
鸿蒙openharmony操作系统LiteOS-A内核技术全解析:架构、性能与开发实践
华为·架构·harmonyos·鸿蒙·鸿蒙系统·open harmony
2503_928411564 天前
10.23 @Observed深层监听
华为·harmonyos·鸿蒙