HarmonyOS 鸿蒙Next：进入页面后怎么让页面的自定义组件的list滚动定位

发布于 1周前 作者 nodeper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：进入页面后怎么让页面的自定义组件的list滚动定位

import { LengthMetrics, router } from "@kit.ArkUI"
@Entry
@Component
struct Index {
  build(){
    Column(){
      Button('click me')
        .onClick(()=>{
          router.pushUrl({
            url:'pages/TestPage'
          })
        })
    }
  }
}

@Component
export struct ListCom {
  @State list:string[] = ['1','2','3','4','5','6','7','8','9','10分水岭','1','2','3','4','5','6','7','8','9','10分水岭','1','2','3','4','5','6','7','8','9','10分水岭']
  scroller: Scroller = new Scroller()
  aboutToAppear(): void {
  }
  build(){
    Column(){
      Row(){
        Text('全部播放')
      }
      List({scroller:this.scroller,space:20}){
        ForEach(this.list,(value:string,index:number)=>{
          ListItem(){
            Row(){
              Text(value)
            }
            .backgroundColor(Color.Pink)
            .width(300)
            .height(60)
          }
        })
      }
      .onAppear(())
    }
    .width('100%')
  }
}

@Entry
@Component
struct TestPage {
  aboutToAppear(): void {
  }
  onPageShow(): void {
  }
  build(){
    Column () {
      Column(){
        Column(){
          Text('111111111')
          Text('111111111')
        }
        ListCom()
      }
    }.width('100%').height('100%')
  }
}

问题：怎么在进入TestPage页面时对ListCom中的list进行滚动定位，之前试了在TestPage的aboutToAppea、onPageShow和ListCom的aboutToAppear中进行scrollToIndex都不行，求解


更多关于HarmonyOS 鸿蒙Next：进入页面后怎么让页面的自定义组件的list滚动定位的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

设置list的initialIndex就可以了，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#接口

List({
  scroller: this.scroller,
  space: 20, 
  initialIndex: 8
}){
  ForEach(this.list,(value:string,index:number)=>{
    ListItem(){
      Row(){
        Text(value)
      }
      .backgroundColor(Color.Pink)
      .width(300)
      .height(60)
    }
  })
}
.onAppear((){
})

更多关于HarmonyOS 鸿蒙Next：进入页面后怎么让页面的自定义组件的list滚动定位的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，若要实现进入页面后让页面的自定义组件中的list滚动定位，你可以利用组件提供的相关API和方法来实现。具体步骤如下：

  1. 获取List组件：首先，你需要获取到页面中的List组件实例。这通常可以通过在页面的代码中给List组件设置一个ID，然后通过该ID获取组件实例。

  2. 设置滚动位置：获取到List组件后，你可以调用其提供的滚动相关的方法，如scrollToItem()或类似的API（具体API名称可能根据鸿蒙系统的版本和组件库有所不同），并传入你想要定位到的列表项的位置参数。

  3. 页面加载时执行：确保这些滚动定位的代码在页面加载完成后执行，例如在页面的onPageStarted()或类似的生命周期方法中调用。

  4. 考虑动画效果：如果需要，你还可以设置滚动时的动画效果，提升用户体验。

请注意，具体的API名称和使用方式可能会随着鸿蒙系统的更新而有所变化，因此建议查阅最新的鸿蒙开发者文档以获取最准确的信息。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部