HarmonyOS 鸿蒙Next 两个list使用scrolltoindex失效

你看一下我给1楼发的代码，demo测试的时候是没问题的，但是实际上相同操作在工程代码上出现了问题，猜测是跳转发生在Ui更新完成前，导致无法跳转，想找一下解决方案，我试用settimeout100 可以解决，但是项目好像不支持这个时间

import { promptAction } from ‘@kit.ArkUI’;

export class parent { title: string = ‘’ child: child[] = [] selectId: number = 0 }

export class child { title: string = ‘’ image: ResourceStr = ‘’ }

@Entry @Component struct TabsOpaque { @State tabArray: parent[] = [{ title: ‘父0’, child: [{ title: ‘子0’, image: $r(‘app.media.app_icon’) }], selectId: 0 }, { title: ‘父1’, child: [{ title: ‘子0’, image: $r(‘app.media.app_icon’) }, { title: ‘子1’, image: $r(‘app.media.app_icon’) }, { title: ‘子2’, image: $r(‘app.media.app_icon’) }, { title: ‘子3’, image: $r(‘app.media.app_icon’) }, { title: ‘子4’, image: $r(‘app.media.app_icon’) }], selectId: 3 }, { title: ‘父2’, child: [{ title: ‘子0’, image: $r(‘app.media.app_icon’) }, { title: ‘子0’, image: $r(‘app.media.app_icon’) }], selectId: 0

}, { title: ‘父3’, child: [{ title: ‘子0’, image: $r(‘app.media.app_icon’) }, { title: ‘子0’, image: $r(‘app.media.app_icon’) }], selectId: 0 }] @State contCurrentIndex: number = 0; //记录当前内容导航索引 @State subCurrentIndex: number = 0; //记录当前下部导航索引 selectedFontColor: Color = Color.Black fontColor: Color = Color.Blue //滑动X轴 @State offsetX: number = 0 private subController: Scroller = new Scroller() private subListController: Scroller = new Scroller() private contScroller: Scroller = new Scroller() private contListScroller: Scroller = new Scroller()

build() { Column() { //用于窗口晃动操作 Column() { Text(‘用于滑动驱动变化’) .onClick(() => { this.contCurrentIndex++ this.contListScroller.scrollToIndex(this.contCurrentIndex, true, ScrollAlign.CENTER) }) } .justifyContent(FlexAlign.Center) .align(Alignment.Center) .height(“50%”) .width(“100%”) .gesture( PanGesture() .onActionUpdate((event: GestureEvent) => { if (event) { this.offsetX = this.offsetX + event.offsetX } }) .onActionEnd((event: GestureEvent) => { //极端return if (this.contCurrentIndex == 0 && this.subCurrentIndex == 0 && this.offsetX > 0) { this.offsetX = 0 return } if (this.contCurrentIndex == this.tabArray[this.subCurrentIndex].child.length - 1 && this.subCurrentIndex == this.tabArray.length - 1 && this.offsetX < 0) { this.offsetX = 0 return } //右滑 if (this.offsetX > 0) { if (this.contCurrentIndex == 0) { this.subCurrentIndex– this.subListController.scrollToIndex(this.subCurrentIndex, true, ScrollAlign.CENTER) } else { this.contCurrentIndex– this.contListScroller.scrollToIndex(this.contCurrentIndex, true, ScrollAlign.CENTER) } } //左滑 if (this.offsetX < 0) { if (this.contCurrentIndex == this.tabArray[this.subCurrentIndex].child.length - 1) { this.subCurrentIndex++ this.subListController.scrollToIndex(this.subCurrentIndex, true, ScrollAlign.CENTER) } else { this.contCurrentIndex++ this.contListScroller.scrollToIndex(this.contCurrentIndex, true, ScrollAlign.CENTER) } } this.offsetX = 0 //更新为0 }) )

  //子Tab
  Scroll(this.contScroller) {
    List({ scroller: this.contListScroller }) {
      ForEach(this.tabArray[this.subCurrentIndex].child, (contTab: child, contIndex: number) => {
        ListItem() {
          Column() {
            Image($r('app.media.app_icon'))
              .width(20)
            Text(contTab.title)
              .fontSize(20)
              .fontColor(this.contCurrentIndex == contIndex ? Color.Red : Color.Black)
              .onClick(() => {
                this.contListScroller.scrollToIndex(contIndex, true, ScrollAlign.CENTER)
                this.contCurrentIndex = contIndex
              })
          }
          .margin({
            left: 10,
            right: 10
          })
        }
      })
    }
    .gesture(
      PanGesture()
        .onActionStart((event: GestureEvent) => {
          if (event) {
            //极限返回
            if ((this.contCurrentIndex == 0 && event.offsetX > 0) ||
              (this.contCurrentIndex == this.tabArray[this.subCurrentIndex].child.length - 1 &&
                event.offsetX < 0)) {
              return
            }
            //触发滑动
            if (event.offsetX < 0) {
              this.contCurrentIndex++
            } else {
              this.contCurrentIndex--
            }
            this.contListScroller.scrollToIndex(this.contCurrentIndex, true, ScrollAlign.CENTER)
          }
        })
    )
    .enableScrollInteraction(false) //关闭自带滑动
    .scrollSnapAlign(ScrollSnapAlign.CENTER)
    .width("100%")
    .height("100%")
    .listDirection(Axis.Horizontal)
    .scrollBar(BarState.Off)
  }
  .width("100%")
  .height(50)
  .border({
    width: 1
  })
  .scrollBar(BarState.Off)
  .scrollable(ScrollDirection.Horizontal)

  //父
  Scroll(this.subController) {
    List({ scroller: this.subListController }) {
      ForEach(this.tabArray, (subTab: parent, subIndex: number) => {
        ListItem() {
          Text(subTab.title)
            .fontSize(30)
            .fontColor(this.subCurrentIndex == subIndex ? Color.Red : Color.Black)
            .onClick(async () => {
              //TODO 未更新二级滑动 使用scrollToIndex 出现index>子组件最大索引 取消跳转
              if (this.subCurrentIndex == subIndex) {
                return
              }

              await this.subListController.scrollToIndex(subIndex, true, ScrollAlign.CENTER)
              this.subCurrentIndex = subIndex
              // 更新子导航索引 视图更新
              this.contCurrentIndex = this.tabArray[subIndex].selectId

              await this.contListScroller.scrollToIndex(this.contCurrentIndex, true, ScrollAlign.CENTER)


            })
            .margin({
              left: 10,
              right: 10
            })
        }
      })
    }
    .gesture(
      PanGesture()
        .onActionStart((event: GestureEvent) => {
          if (event) {
            //极限返回
            if ((this.subCurrentIndex == 0 && event.offsetX > 0) ||
              (this.subCurrentIndex == this.tabArray.length - 1 && event.offsetX < 0)) {
              return
            }
            //触发滑动
            if (event.offsetX < 0) {
              this.subCurrentIndex++
            } else {
              this.subCurrentIndex--
            }
            this.subListController.scrollToIndex(this.subCurrentIndex, true, ScrollAlign.CENTER)
          }
          // Event.offsetX>0
        })
    )
    .enableScrollInteraction(false) //关闭自带滑动
    .scrollSnapAlign(ScrollSnapAlign.CENTER)
    .scrollBar(BarState.Off)
    .listDirection(Axis.Horizontal)
    .width("100%")
    .height(30)
  }

  .scrollBar(BarState.Off)
  .scrollable(ScrollDirection.Horizontal)

}

} }