HarmonyOS Scroll嵌套Scroll，外部的Scroll无法滚动

HarmonyOS

fox280

2024-12-25 14:28:34

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

可以设置Sroll nestedScroll属性，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5#nestedscroll1010

示例参考：

@Entry
@Component
struct StickyNestedScroll {
  @State arr: number[] = []
  scroller: Scroller = new Scroller()

  @Styles
  listCard() {
    .backgroundColor(Color.White)
    .height(72)
    .width("100%")
    .borderRadius(12)
  }

  build() {
    Scroll(this.scroller) {
      Column() {
        Text("Scroll Area")
          .width("100%")
          .height("40%")
          .backgroundColor('#0080DC')
          .textAlign(TextAlign.Center)
        List({ space: 10 }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text("item" + item)
                .fontSize(16)
            }.listCard().onClick(() => {
              this.scroller.scrollTo({ xOffset: 0, yOffset: item * 100 })
            })
          }, (item: string) => item)
        }.width("100%")
        .edgeEffect(EdgeEffect.Spring)
        .nestedScroll({
          scrollForward: NestedScrollMode.PARENT_FIRST,
          scrollBackward: NestedScrollMode.SELF_FIRST
        })
      }.width("100%")
    }
    .edgeEffect(EdgeEffect.Spring)
    .friction(0.6)
    .backgroundColor('#DCDCDC')
    .scrollBar(BarState.Off)
    .width('100%')
    .height('100%')
  }

  aboutToAppear() {
    for (let i = 0; i < 30; i++) {
      this.arr.push(i)
    }
  }
}