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

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

HarmonyOS
2024-06-04 00:33:31
618浏览
收藏 0
回答 1
回答 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%") 
  } 
}
  • 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.
  • 49.
  • 50.
  • 51.
分享
微博
QQ
微信
回复
2024-06-04 23:07:48
相关问题
HarmonyOS Scroll组件滚动控制
938浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动问题
1460浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动条怎么隐藏
777浏览 • 1回复 待解决
HarmonyOS List页面如何主动停止滚动
833浏览 • 1回复 待解决
如何获取Scroll组件的当前滚动偏移量
2977浏览 • 1回复 待解决
HarmonyOS scroll滚动问题
727浏览 • 1回复 待解决
HarmonyOS scroll和list滚动冲突
1133浏览 • 1回复 待解决
ArkUI如何通过代码动态创建组件
3470浏览 • 1回复 待解决