Nativescript 滚动到水平偏移

Question

我有一个水平滚动视图，其中列出了项目，我希望当前项目（由其索引确定）成为列表中的第一个可查看项目。

我正在使用scrollToHorizontalOffset并传入偏移量的数学值，但它并没有将当前项目作为第一个可见的项目。

所有内容都会记录，但两者都记录为未定义：

    this.scrollLayout.scrollToHorizontalOffset(200, true);```



```   `<ScrollView orientation="horizontal" #scrollView (loaded)="bindScrollView()">
        <FlexboxLayout alignItems="flex-start">
          <StackLayout
           *ngFor="let item of data; let i = index"
        [class.disabled]="item.disabled || (firstDisabledIndex !== null && i > firstDisabledIndex)"
        [class.background-dark]="currentItem === item"
        [class.background-standard]="currentItem !== item"
        style="border-radius: 10%; margin-top: 10; margin-right: 10; padding: 15"
        (tap)="onCardClick(item)"
      >
        <Label [class.text-light]="currentItem === item" [text]="item.title" fontSize="20" fontWeight="bold"></Label>
        <StackLayout class="white-circle" [class.text-dark]="currentItem === item">
          <Label [text]="item.numberVal || i + 1" fontSize="18" fontWeight="bold"></Label>
        </StackLayout>
        <Label *ngIf="item.canProceed" class="dot"></Label>
        <Label *ngIf="!item.canProceed" class="dotplaceholder"></Label>
      </StackLayout>
    </FlexboxLayout>
  </ScrollView>````


```    `@ViewChild('scrollView', { static: false }) scrollViewRef!: ElementRef<ScrollView>;
  // @ViewChild('scrollView') scrollViewRef!: ElementRef; // for left and right scroll
  // @ViewChild('scrollView', { static: false }) scrollViewLayout!: ScrollView;
  // @ViewChild('cardContainer', { static: false }) cardContainer!: ElementRef;
  // page!: Page;
  scrollLayout!: ScrollView;
  // contentContainer!: StackLayout;
  // numLabels = 50;

  // ngAfterViewInit() {
    // console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!NumberStepperComponent', this.data);
    // this.scrollToIndex(this.currentItem);
    // this.scrollToId(this.currentItem);
    // )
    //  this.scrollToCurrentItem(this.currentItem);
  // }

  bindScrollView() {
    this.scrollLayout = <ScrollView>this.scrollViewRef.nativeElement;
    console.log('bindScrollView', this.scrollLayout);
    if (this.currentItem) {
      console.log('CURRENTITEMS');
      this.scrollToCurrentItem(this.currentItem);
    }
  }

  scrollToCurrentItem(currentItem: CardInputs) {
    const cardIndex = this.data.indexOf(currentItem);
    console.log('cardIndex', cardIndex);

    // Assuming each item has a fixed width, you can adjust this value based on your layout
    const itemWidth = 150; // Adjust this value based on your layout

    const scrollPosition = cardIndex * itemWidth;

    console.log('scrollPosition', cardIndex, itemWidth, scrollPosition);
    console.log('VARIABLESET', this.scrollLayout);
    console.log('SCROLLABLEWIDTH', this.scrollLayout.scrollableWidth);
    console.log('SETOFFSET', this.scrollLayout.scrollToHorizontalOffset(200, false));
    this.scrollLayout.scrollToHorizontalOffset(scrollPosition, true);

    // this.cardContainer.scrollLeft = scrollPosition;
    // console.log('DOTHEMATHDOE', this.scrollLayout.scrollToHorizontalOffset(scrollPosition, false));
    // Set the scroll position
    // this.scrollViewRef.nativeElement.scrollToHorizontalOffset(scrollPosition, false);
  }````

Answer 1

答案是在调用之前使用setTimeout

this.scrollViewRef.nativeElement.scrollToHorizontalOffset(scrollPosition, false);