HarmonyOS 鸿蒙Next 切换tab时，定位问题

问题：

想实现的功能：

切换到【课程介绍】时，滚动条内容定位到【开发二部】处，

切换到【课程目录】时，滚动条内容定位到【课程目录11】处。

第一次进入画面的时候上述功能是ok的，但是当手动拖拽滚动条后，就不能准确定位了。

demo代码在底部

代码：

@Entry
@Component
struct Index5 {
  @State currentIndex: number = 0
  @Builder
  tabBuilder(title: string, targetIndex: number) {
    Column() {
      Text(title).fontColor(this.currentIndex === targetIndex ? ‘#1698CE’ : ‘#6B6B6B’)
    }.width(‘100%’)
    .height(10)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Tabs({ index: this.currentIndex, barPosition: BarPosition.Start }) {
        TabContent() {
          CoursesContentDisplayView({ flagVisible: true, currentIndex: this.currentIndex });
        }.tabBar(this.tabBuilder(‘课程介绍’, 0))

        TabContent() {
          CoursesContentDisplayView({ flagVisible: true, currentIndex: this.currentIndex });
        }.tabBar(this.tabBuilder(‘课程目录’, 1))

        TabContent() {
          Column().width(‘100%’).height(‘100%’)
        }.tabBar(this.tabBuilder(‘我的’, 2))
      }
      .scrollable(false)
      .barMode(BarMode.Fixed)
      .onChange((index: number) => {
        this.currentIndex = index
        console.log(‘currentIndex:’, this.currentIndex.toString())
      })
      .width(‘100%’)
      .animationDuration(0)
    }.width(‘100%’)
  }
}

@Component
struct CoursesContentDisplayView {
  @State flagVisible: boolean = true;
  @Link currentIndex: number;
  @State courseTypeList: Array<CoursesDetailsModel> = [
    new CoursesDetailsModel(‘课程目录11’, ‘课程内容11’),
    new CoursesDetailsModel(‘课程目录12’, ‘课程内容12’),
    new CoursesDetailsModel(‘课程目录13’, ‘课程内容13’),
    new CoursesDetailsModel(‘课程目录14’, ‘课程内容14’),
    new CoursesDetailsModel(‘课程目录15’, ‘课程内容15’),
    new CoursesDetailsModel(‘课程目录16’, ‘课程内容16’),
    new CoursesDetailsModel(‘课程目录17’, ‘课程内容17’),
    new CoursesDetailsModel(‘课程目录18’, ‘课程内容18’),
    new CoursesDetailsModel(‘课程目录19’, ‘课程内容19’),
    new CoursesDetailsModel(‘课程目录19’, ‘课程内容19’),
    new CoursesDetailsModel(‘课程目录19’, ‘课程内容19’),
    new CoursesDetailsModel(‘课程目录19’, ‘课程内容19’),
    new CoursesDetailsModel(‘课程目录19’, ‘课程内容19’),
    new CoursesDetailsModel(‘课程目录19’, ‘课程内容19’),
    new CoursesDetailsModel(‘课程目录19’, ‘课程内容19’),
    new CoursesDetailsModel(‘课程目录19’, ‘课程内容19’),
  ]
  private scroller: Scroller = new Scroller()

  build() {
    Column() {
      List({ initialIndex: this.currentIndex, scroller: this.scroller }) {
        ListItem() {
          Column() {
            Row() {
              Text(‘开发二部’)
                .width(‘90%’)
                .textAlign(TextAlign.Start)
                .fontColor(’#000000’)
                .fontSize(20)
                .fontWeight(600)//FontWeight.Bold
                .padding({ left: 12 })
            }
            .width(‘100%’)
            .justifyContent(FlexAlign.Start)

            Text(‘13人参加’)
              .width(‘100%’)
              .fontSize(12)
              .textAlign(TextAlign.Start)
              .fontColor(‘rgba(0, 0, 0, 0.6)’)
              .margin({ top: 15, bottom: 10 })
              .padding({ left: 12 })
            Text(‘课程介绍’)
              .width(‘100%’)
              .textAlign(TextAlign.Start)
              .fontColor(’#000000’)
              .fontSize(15)
              .fontWeight(500)//FontWeight.Bold
              .margin({ top: 15 })
              .padding({ left: 12 })
            Text(‘课程介绍111’)
              .width(‘100%’)
              .fontSize(12)
              .textAlign(TextAlign.Start)
              .fontColor(‘rgba(0, 0, 0, 0.6)’)
              .margin({ top: 15, bottom: 10 })
              .padding({ left: 12, right: 12 })
          }
          .justifyContent(FlexAlign.Start)
          .width(‘100%’)
          .border({ width: { bottom: 15 }, color: “#F0F0F0” })

        }

        ListItem() {
          // 课程目录
          Stack({ alignContent: Alignment.TopStart }) {
            List() {
              ListItem() {
                Column() {
                  ForEach(this.courseTypeList, (item: CoursesDetailsModel) => {
                    Text(item.courseTitle)
                      .width(‘100%’)
                      .textAlign(TextAlign.Start)
                      .fontColor(’#000000’)
                      .fontSize(15)
                      .fontWeight(500)
                      .margin({ top: 15 })
                      .padding({ left: 12 })
                    Text(item.courseName)
                      .width(‘100%’)
                      .fontSize(12)
                      .textAlign(TextAlign.Start)
                      .fontColor(‘rgba(0, 0, 0, 0.6)’)
                      .margin({ top: 15, bottom: 10 })
                      .padding({ left: 12, right: 12 })
                  })
                }
              }
            }
          }
          .width(‘100%’)
        }
      }
      .onAppear(() => {
        console.log(‘index:’, this.currentIndex.toString())
        this.scroller.scrollToIndex(this.currentIndex)
      })
      .onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
        console.info(onScroll scrollState = ScrollState + scrollState + , scrollOffset = + scrollOffset)
      })
    }
  }
}

class CoursesDetailsModel {
  // 课程目录标题
  courseTitle: string = ‘’;
  // 课程目录名称
  courseName: string = ‘’;
  constructor(courseTitle: string, courseName: string) {
    this.courseTitle = courseTitle;
    this.courseName = courseName;
  }
}