HarmonyOS鸿蒙Next中List如何用代码滚动到指定行或位置

可以用scroller.scrollTo 方法参考demo：

@Entry
@Component
struct ListExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
  @State index: number = 2
  @State indexInGroup: number = 6
  private scroller: Scroller = new Scroller();

  build() {
    Column() {
      Button('跳转到指定位置').onClick(() => {
        this.scroller.scrollTo({ xOffset: 700, yOffset: 700 })
      })
      List({ space: 20, initialIndex: 0, scroller: this.scroller }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, (item: string) => item)
      }
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .divider({
        strokeWidth: 2,
        color: 0xFFFFFF,
        startMargin: 20,
        endMargin: 20
      }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring

      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

更多关于HarmonyOS鸿蒙Next中List如何用代码滚动到指定行或位置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼•9 天前

let scroller:Scroller = new Scroller()

let listScroller:ListScroller = new ListScroller()

List(this.scroller)

scroller.scrollTo()
listScroller.scrollToIndex()

songsunli 3楼•9 天前

在HarmonyOS鸿蒙Next中，使用List组件滚动到指定行或位置可以通过ListController来实现。ListController提供了scrollToIndex方法，允许你将列表滚动到指定的索引位置。以下是一个简单的示例代码：

import { List, ListController } from '@ohos.arkui.advanced';

@Entry
@Component
struct Index {
  private listController: ListController = new ListController();

  build() {
    Column() {
      List({ controller: this.listController }) {
        // List items here
      }
      .onClick(() => {
        // Scroll to the 5th item
        this.listController.scrollToIndex(4);
      })
    }
  }
}

在这个示例中，ListController被实例化并与List组件关联。通过调用scrollToIndex方法并传入目标索引，列表将滚动到指定位置。注意索引是从0开始的，因此scrollToIndex(4)将滚动到第5个项。

如果需要平滑滚动，可以使用scrollToIndex的第二个参数smooth，将其设置为true：

this.listController.scrollToIndex(4, true);

这样，列表将以平滑的方式滚动到指定位置。

caililin 4楼•9 天前

在HarmonyOS鸿蒙Next中，可以使用List组件的scrollToIndex方法来滚动到指定行或位置。示例代码如下：

let list = this.$element('listId') as List;
list.scrollToIndex({ index: 5, smooth: true });

其中，index为要滚动到的行索引，smooth为是否平滑滚动。