ArkTS 复刻iOS弹性滑动、列表越界回弹效果

/** * ArkTS 复刻iOS弹性滑动、列表越界回弹效果 * 功能：顶部/底部越界弹性拉伸、弹簧式回弹、流畅无卡顿 * 兼容：API12~API23，支持List/Scroll容器，可直接复用 */@Entry@Componentstruct IOS弹性滑动Demo {  // 列表数据（模拟接口返回，用于测试滑动效果）  @State listData: string[] = Array.from({ length: 15 }, (_, i) => `列表项 ${i + 1}`)  // 越界偏移量（顶部/底部拉伸时的偏移距离，正数=顶部拉伸，负数=底部拉伸）  @State overScrollOffset: number = 0  // 触摸按下时的初始Y坐标  @State startY: number = 0  // 是否处于越界拉伸状态  @State isOverScroll: boolean = false  // 弹性强度（数值越小，弹性越强，推荐5~10，贴合iOS手感）  readonly elasticStrength: number = 7  // 最大拉伸距离（防止过度拉伸，推荐80~120px）  readonly maxOverScroll: number = 100  build() {    Column({ alignItems: ItemAlign.Center, space: 0 }) {      // 页面标题      Text("ArkTS 复刻iOS弹性滑动、越界回弹效果")        .fontSize(22)        .fontWeight(FontWeight.Bold)        .fontColor("#333333")        .margin({ top: 30, bottom: 15 })      // 核心列表容器（支持弹性滑动、越界回弹）      List({ space: 12 }) {        ForEach(this.listData, (item) => {          ListItem() {            // 列表项样式（美化，贴合现代App设计，模拟iOS列表风格）            Text(item)              .width('100%')              .height(80)              .backgroundColor(Color.White)              .borderRadius(12)              .textAlign(TextAlign.Center)              .fontSize(16)              .fontColor("#333333")              .shadow({ radius: 2, color: '#10000000' })          }          .padding({ left: 15, right: 15 })        })      }      .width('100%')      .height('100%')      .backgroundColor("#F5F7FA")      // 关键：监听触摸事件，实现弹性滑动和越界回弹      .onTouch((event: TouchEvent) => {        this.handleTouchEvent(event)      })      // 关键：通过translate实现列表越界拉伸      .translate({ y: this.overScrollOffset })    }    .width('100%')    .height('100%')    .backgroundColor("#F5F7FA")  }  /**   * 处理触摸事件：按下、移动、松开，实现弹性拉伸和回弹   * @param event 触摸事件对象   */  private handleTouchEvent(event: TouchEvent) {    switch (event.type) {      // 1. 触摸按下：记录初始Y坐标，重置越界状态      case TouchType.Down:        this.startY = event.touches[0].y        this.isOverScroll = false        break      // 2. 触摸移动：判断是否越界，计算拉伸距离      case TouchType.Move:        const currentY = event.touches[0].y        // 计算手指移动距离（正数=向上滑，负数=向下滑）        const moveDistance = currentY - this.startY        // 获取列表当前滚动位置（顶部/底部）        const listPosition = this.getListPosition()        // 情况1：列表在顶部，继续向下拉（越界拉伸）        if (listPosition === ListPosition.TOP && moveDistance < 0) {          this.isOverScroll = true          // 计算拉伸距离：根据弹性强度缩放，避免过度拉伸          let offset = moveDistance / this.elasticStrength          // 限制最大拉伸距离          this.overScrollOffset = Math.max(offset, -this.maxOverScroll)        }        // 情况2：列表在底部，继续向上拉（越界拉伸）        else if (listPosition === ListPosition.BOTTOM && moveDistance > 0) {          this.isOverScroll = true          // 计算拉伸距离：根据弹性强度缩放          let offset = moveDistance / this.elasticStrength          // 限制最大拉伸距离          this.overScrollOffset = Math.min(offset, this.maxOverScroll)        }        // 情况3：未越界，重置拉伸偏移量        else {          if (this.isOverScroll) {            this.overScrollOffset = 0          }        }        break      // 3. 触摸松开/取消：触发弹性回弹动画      case TouchType.Up:      case TouchType.Cancel:        if (this.isOverScroll && this.overScrollOffset !== 0) {          // 弹簧回弹动画，还原iOS流畅质感          animateTo({            duration: 300,            curve: Curve.Spring // 核心：弹簧曲线，模拟iOS回弹          }, () => {            this.overScrollOffset = 0 // 回弹到原始位置          })          this.isOverScroll = false        }        break    }  }  /**   * 判断列表当前滚动位置（顶部/底部/中间）   * @returns 列表位置枚举   */  private getListPosition(): ListPosition {    // 获取列表组件的滚动信息（滚动偏移量、总高度、可视高度）    const listScroll = this.$element('list') as List    if (!listScroll) return ListPosition.MIDDLE    const scrollOffset = listScroll.scrollOffset()    const contentHeight = listScroll.contentHeight()    const visibleHeight = listScroll.visibleHeight()    // 列表在顶部（滚动偏移量为0）    if (scrollOffset <= 0) {      return ListPosition.TOP    }    // 列表在底部（滚动偏移量 + 可视高度 >= 内容总高度）    else if (scrollOffset + visibleHeight >= contentHeight - 1) { // 减1避免精度问题      return ListPosition.BOTTOM    }    // 列表在中间    else {      return ListPosition.MIDDLE    }  }}/** * 列表位置枚举（顶部/底部/中间） */enum ListPosition {  TOP,    // 顶部  BOTTOM, // 底部  MIDDLE  // 中间}