HarmonyOS 横纵滚动两个scroll怎么实现同时滚动

​横纵滚动两个scroll怎么实现同时滚动,我看了很久相关组件参数设置,也没达到想要的效果


HarmonyOS
2024-08-04 14:48:09
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
youganlan

横纵滚动的两个scroll,通过彼此的滚动事件.onScroll的回调,实现两个scroll的联动,

demo如下:

@Entry 
@Component 
struct ScrollIndex02 { 
  scrollerTop: Scroller = new Scroller() 
  scrollerLeft: Scroller = new Scroller() 
  @State dataListTop: string[] = ["a", "b", 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', "l"] 
  @State dataListLeft: string[] = ["1", "2", '3', '4', '5', '6', '7', '8', '9', '10', '11', "12"] 
 
  build() { 
    Stack({alignContent:Alignment.TopStart}) { 
      Row(){ 
        //任意图片:resources\base\media\icon.png 
        Image($r('app.media.icon')) 
          .height(60) 
        List({ space: 4, scroller: this.scrollerTop }) { 
          ForEach(this.dataListTop, (item: string) => { 
            ListItem() { 
              Row() { 
                Text("item" + item) 
              } 
              .alignItems(VerticalAlign.Center) 
              .width(60) 
              .justifyContent(FlexAlign.Center) 
              .backgroundColor(Color.Pink) 
              .borderRadius(5) 
              .height("100%") 
            }.height("100%") 
          }) 
        } 
        .margin({left:2}) 
        .height(60) 
        .listDirection(Axis.Horizontal) 
        .edgeEffect(EdgeEffect.None) 
        .scrollBar(BarState.Off) 
        .onScroll((offset: number, state: ScrollState) => { 
          this.scrollerLeft.scrollBy(offset, 0) 
        }) 
      } 
      .height(60)
  • 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-08-05 12:17:34


相关问题
HarmonyOS 怎么两个list同时滚动
733浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动控制
938浏览 • 1回复 待解决
HarmonyOS scroll滚动问题
727浏览 • 1回复 待解决
HarmonyOS Scroll组件的滚动怎么隐藏
777浏览 • 1回复 待解决
HarmonyOS scroll和list滚动冲突
1133浏览 • 1回复 待解决
HarmonyOS 两个日期怎么比较
1215浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动问题
1455浏览 • 1回复 待解决
HarmonyOS 两个object怎么拼接成一
1148浏览 • 1回复 待解决
栅格布局怎么实现滚动效果?
1492浏览 • 0回复 待解决
HarmonyOS 怎么两个PixelMap合成一
1211浏览 • 2回复 待解决