HarmonyOS 怎么设置list滚动条距离顶部位置

搜索和列表用的同一个页面,点击搜索时会把列表页面的数据备份并清空页面数据,再次返回到列表页需要把备份数据赋值给列表页,并定位到进入搜索的滚动条的位置,怎么设置list滚动条位置?

HarmonyOS
2024-12-25 13:54:02
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zxjiu

onDataReloaded会重新加载列表导致,可以给List添加scroller控制器,将列表跳回原先所在位置this.scroller.scrollToIndex,示例参考如下:

@Entry
@Component
struct RefreshDemo {
  @State isRefreshing: boolean = false
  @State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  private listScroller: Scroller = new Scroller();

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing }) {
        List({ scroller: this.listScroller }) {
          ForEach(this.arr, (item: string) => {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF)
            }
          }, (item: string) => item)
        }
        .onScrollIndex((first: number) => {
          console.info(first.toString())
        })
        .width('100%')
        .height('100%')
        .divider({
          strokeWidth: 1,
          color: Color.Yellow,
          startMargin: 10,
          endMargin: 10
        })
        .scrollBar(BarState.Off)
      }
      .onRefreshing(() => {
        setTimeout(() => {
          this.isRefreshing = false
        }, 2000)
        this.arr.unshift('11')
        this.arr.unshift('12')
        this.listScroller.scrollToIndex(2)
      })
      .backgroundColor(0x89CFF0)
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.

可以通过滑动监听获取到index:

onScrollIndex(event: (start: number, end: number, center: number) => void): ListAttribute;
  • 1.
分享
微博
QQ
微信
回复
2024-12-25 16:45:55
相关问题
如何获取List组件滚动条滚动距离
3474浏览 • 1回复 待解决
请问ScrollView怎么显示滚动条
6305浏览 • 1回复 待解决
HarmonyOS webView隐藏滚动条
665浏览 • 1回复 待解决
List滚动条时长时短,求解决方案?
1687浏览 • 1回复 待解决
HarmonyOS Scroll组件的滚动条怎么隐藏
746浏览 • 1回复 待解决
ListContainer 有滚动条 显示吗?
6369浏览 • 1回复 待解决
HarmonyOS RichText组件如何取消滚动条
604浏览 • 1回复 待解决
HarmonyOS Web组件的滚动条如何隐藏
714浏览 • 1回复 待解决
如何自定义滚动条的样式?
1213浏览 • 1回复 待解决
HarmonyOS 如何隐藏Web组件的滚动条
1315浏览 • 2回复 待解决
HarmonyOS List列表滚动到指定位置
1181浏览 • 1回复 待解决