HarmonyOS鸿蒙Next中左右滑动数据延迟Tabs+ForEach+TabContent解决方案

您可以参考如下demo:

// xxx.ets
import ComponentUtils from '@ohos.arkui.UIContext';
import { router } from '@kit.ArkUI';
@Entry
@Component
struct TabsExample {
  @State currentIndex: number = 0
  @State animationDuration: number = 300
  @State indicatorLeftMargin: number = 0
  @State indicatorWidth: number = 0
  private tabsWidth: number = 0
  private componentUtils: ComponentUtils.ComponentUtils = this.getUIContext().getComponentUtils()
  @State isRefreshing: boolean = false
  private subController: TabsController = new TabsController(); //Tab 控制器
  @State mMessageType: number = 1
  @State private mTitleList: Array<string> = []
  aboutToAppear(): void {
    if (this.mMessageType == 1) {
      this.mTitleList.push('安顿快讯')
      this.mTitleList.push('疾病提醒')
      this.mTitleList.push('互动消息')
    } else if (this.mMessageType == 2) {
      this.mTitleList.push('紧急提示')
      this.mTitleList.push('疾病提醒')
      this.mTitleList.push('器官异常')
    }
  }
  @Builder
  TabBuilder(title: string, index: number) {
    Column() {
      Text(title)
        .width('100%')
        .textAlign(TextAlign.Center)
        .fontColor(index == this.currentIndex ? Color.Red : Color.Black)
        .fontSize(16)
        .fontWeight(index == this.currentIndex ? FontWeight.Bold : FontWeight.Normal)
        .id(index.toString())
        .onAreaChange((oldValue: Area, newValue: Area) => {
          if (this.currentIndex === index && (this.indicatorLeftMargin === 0 || this.indicatorWidth === 0)) {
            if (newValue.position.x != undefined) {
              let positionX = Number.parseFloat(newValue.position.x.toString())
              this.indicatorLeftMargin = Number.isNaN(positionX) ? 0 : positionX
            }
            let width = Number.parseFloat(newValue.width.toString())
            this.indicatorWidth = Number.isNaN(width) ? 0 : width
          }
        })
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height(46)
  }
  @Builder CustomheaderRefreshlayout(){
    Column(){
      Text("这是下拉刷新头部")
        .width("100%")
        .height(80)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
    }
    .backgroundColor(Color.Green)
    .width("100%")
    .height(80)
  }
  @Builder
  itemLayout() {
    Column(){
      Text(this.currentIndex==0?'安顿快讯':this.currentIndex==1?"疾病提醒":'互动消息')
        .fontColor(Color.Red)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
  }
  build() {
    Column() {
      Stack({ alignContent: Alignment.TopEnd }) {
        Row(){
          Image($r('app.media.startIcon'))
            .objectFit(ImageFit.None).width(36).height(36)
            .onClick(()=> {
              router.back();
            })
          Text(this.mMessageType==1?'系统消息':this.mMessageType==2?'健康消息':this.mMessageType==3?'SOS求助':'咨询问诊')
            .fontColor(Color.White)
            .fontSize(16)
          Image($r('app.media.startIcon'))
            .objectFit(ImageFit.None).visibility(Visibility.Hidden).width(36).height(36)
        }
        .height('50vp')
        .width('100%')
        .backgroundColor(Color.Green)
        .justifyContent(FlexAlign.SpaceBetween)
        Row(){
          Text('一键已读')
            .fontSize(14)
            .fontColor(Color.White)
        }
        .alignItems(VerticalAlign.Center)
        .height('50vp')
        .margin({right:14})
      }
      Stack({ alignContent: Alignment.TopStart }) {
        Tabs({ barPosition: BarPosition.Start , controller:this.subController}) {
          ForEach(this.mTitleList, (item: string, index: number)=> {
            TabContent() {
              Refresh({ refreshing: $$this.isRefreshing,builder:this.CustomheaderRefreshlayout()}){
                this.itemLayout()
              }
              .onStateChange((refreshStatus: RefreshStatus) => {
                switch (refreshStatus){
                  case RefreshStatus.Inactive:
                    break
                  case RefreshStatus.Drag:
                    break
                  case RefreshStatus.OverDrag:
                    break
                  case RefreshStatus.Refresh:
                    break
                  case RefreshStatus.Done:
                    break
                }
              })
              .onRefreshing(() => {
                setTimeout(() => {
                  this.isRefreshing = false
                }, 2000)
                console.log('onRefreshing test')
              })
            }
            .tabBar(this.TabBuilder(item,index))
            .width('100%').height('100%')
            // .backgroundColor($r('app.color.project_main_bg_color'))
          })
        }
        .onAreaChange((oldValue: Area, newValue: Area) => {
          let width = Number.parseFloat(newValue.width.toString())
          this.tabsWidth = Number.isNaN(width) ? 0 : width
        })
        .barWidth('100%')
        // .barHeight(56)
        .width('100%')
        .backgroundColor('#F1F3F5')
        .animationDuration(this.animationDuration)
        .onChange((index: number) => {
          this.currentIndex = index // 监听索引index的变化，实现页签内容的切换。
        })
        .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
          // 切换动画开始时触发该回调。下划线跟着页面一起滑动，同时宽度渐变。
          this.currentIndex = targetIndex
          let targetIndexInfo = this.getTextInfo(targetIndex)
          this.startAnimateTo(this.animationDuration, targetIndexInfo.left, targetIndexInfo.width)
        })
        .onAnimationEnd((index: number, event: TabsAnimationEvent) => {
          // 切换动画结束时触发该回调。下划线动画停止。
          let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
          this.startAnimateTo(0, currentIndicatorInfo.left, currentIndicatorInfo.width)
        })
        .onGestureSwipe((index: number, event: TabsAnimationEvent) => {
          // 在页面跟手滑动过程中，逐帧触发该回调。
          let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
          this.currentIndex = currentIndicatorInfo.index
          this.indicatorLeftMargin = currentIndicatorInfo.left
          this.indicatorWidth = currentIndicatorInfo.width
        })
        Column()
          .height(2)
          .width(this.indicatorWidth)
          .margin({ left: this.indicatorLeftMargin, top: 48 })
        // .backgroundColor('#007DFF')
      }.width('100%')
    }.width('100%').height("100%")
  }
  private getTextInfo(index: number): Record<string, number> {
    let rectangle = this.componentUtils.getRectangleById(index.toString())
    return { 'left': px2vp(rectangle.windowOffset.x), 'width': px2vp(rectangle.size.width) }
  }
  private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> {
    let nextIndex = index
    if (index > 0 && event.currentOffset > 0) {
      nextIndex--
    } else if (index < 3 && event.currentOffset < 0) {
      nextIndex++
    }
    let indexInfo = this.getTextInfo(index)
    let nextIndexInfo = this.getTextInfo(nextIndex)
    let swipeRatio = Math.abs(event.currentOffset / this.tabsWidth)
    let currentIndex = swipeRatio > 0.5 ? nextIndex : index  // 页面滑动超过一半，tabBar切换到下一页。
    let currentLeft = indexInfo.left + (nextIndexInfo.left - indexInfo.left) * swipeRatio
    let currentWidth = indexInfo.width + (nextIndexInfo.width - indexInfo.width) * swipeRatio
    return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth }
  }
  private startAnimateTo(duration: number, leftMargin: number, width: number) {
    animateTo({
      duration: duration, // 动画时长
      curve: Curve.Linear, // 动画曲线
      iterations: 1, // 播放次数
      playMode: PlayMode.Normal, // 动画模式
      onFinish: () => {
        console.info('play end')
      }
    }, () => {
      this.indicatorLeftMargin = leftMargin
      this.indicatorWidth = width
    })
  }
}

参考链接：示例9自定义tabbar切换动画