Scroll组件如何通过代码的方式停止滚动?

如题:Scroll组件如何通过代码的方式停止滚动?

阅读 519
1 个回答

解决方案使用下面的demo可以解决该问题,当停止滚动的时候将另一个的scrollBy设置为0,0即可完成

@Entry
@Component
struct ScrollIndex {
  scrollerTop: Scroller = new Scroller()
  scrollerBottom: Scroller = new Scroller()
  @State dataListTop: string[] = ["a", "b", 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', "l"]
  @State dataListBottom: string[] = ["a", "b", 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', "l"]

  build() {
    Column() {
      List({ space: 8, scroller: this.scrollerTop }) {
        ForEach(this.dataListTop, (item: string) => {
          ListItem() {
            Row() {
              Text("item" + item)
            }
            .alignItems(VerticalAlign.Center)
            .width(100)
            .justifyContent(FlexAlign.Center)
            .backgroundColor(Color.Pink)
            .borderRadius(5)
            .height("100%")
          }.height("100%")
        })
      }.height(60).listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)

      Divider().color(Color.Red).height(10)

      List({ space: 8, scroller: this.scrollerBottom }) {
        ForEach(this.dataListBottom, (item: string) => {
          ListItem() {
            Row() {
              Text("item" + item)
            }
            .alignItems(VerticalAlign.Center)
            .width(100)
            .justifyContent(FlexAlign.Center)
            .backgroundColor(Color.Pink)
            .borderRadius(5)
            .height("100%")
          }.height("100%")
        })
      }.height(60).listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)
      .onScroll((offset: number, state: ScrollState) => {
        this.scrollerTop.scrollBy(offset, 0)
      })
    }.width("100%").height("100%")
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进