HarmonyOS list有没有点击对应item之后,item滑动到指定位置的办法?(顶部、中部、或者底部)

HarmonyOS
2024-12-24 16:02:35
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
fox280

2.list点击item之后,滑动到指定位置:

.onClick(() => {
  // 点击按钮时,指定跳转位置,返回列表顶部
  this.listScroller.scrollToIndex(0)
})
  • 1.
  • 2.
  • 3.
  • 4.

支持文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-create-list-V5#ZH-CN_TOPIC_0000001884756518__%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E4%B8%8E%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD

想实现滑动后显示在中间,可将属性设置为ScrollAlign.CENTER居中对齐。

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5#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,false,ScrollAlign.CENTER)
      })
      .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.
分享
微博
QQ
微信
回复
2024-12-24 18:20:55
相关问题
HarmonyOS List列表滚动到指定位置
1184浏览 • 1回复 待解决
HarmonyOS list如何动态滚动到指定位置
863浏览 • 1回复 待解决
HarmonyOS List组件指定item刷新实现方案
907浏览 • 1回复 待解决
Listitem点击变色有什么好方法吗
3224浏览 • 1回复 待解决
HarmonyOS listitem如何保存状态
830浏览 • 2回复 待解决
HarmonyOS List item 刷新问题
1525浏览 • 1回复 待解决