HarmonyOS 鸿蒙Next scroll嵌套滚动，nestedScroll设置问题

HarmonyOS 鸿蒙Next scroll嵌套滚动，nestedScroll设置问题

  1. scroll嵌套滚动，怎么才能收尾一起联动。下面这样设置只有头部跟随列表。向上滑动list还没到最后一条，底部view就冒出来了。

  2. 上面grid，下面接list怎么写，scroll(){ column() { grid() list() } }。

Scroll(this.scrollerForScroll) {
  Column() {
    Text(
      "刷新"
    ).width("100%").height(this.headHeight).textAlign(TextAlign.Center).backgroundColor(Color.Pink)
    List({ space: 20 }) {
      ForEach(this.arr, (item: number) => {
        ListItem() {
          Text('' + item)
            .width('100%')
            .height(100)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .borderRadius(10)
            .backgroundColor(0xFFFFFF)
        }
      }, (item: number) => item.toString())
    }
    .width("100%")
    .height("100%")
    .edgeEffect(EdgeEffect.None)
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST,
    })

    Text(
      "加载更多"
    ).width("100%").height(this.headHeight).textAlign(TextAlign.Center).backgroundColor(Color.Pink)

  }
}
.edgeEffect(EdgeEffect.Spring)
.scrollBar(BarState.Off)

更多关于HarmonyOS 鸿蒙Next scroll嵌套滚动，nestedScroll设置问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

看看这个Demo

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Scroll(this.scroller) {
        Column() {
          Text(
            "刷新"
          ).width("100%").height(30).textAlign(TextAlign.Center).backgroundColor(Color.Pink)
          ForEach(this.arr, (item: number) => {
            Text(item.toString())
              .width('90%')
              .height(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ top: 10 })
          }, (item: string) => item)
          Text(
            "加载更多"
          ).width("100%").height(30).textAlign(TextAlign.Center).backgroundColor(Color.Pink)
        }.width('100%')
      }
      .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
      .scrollBar(BarState.On) // 滚动条常驻显示
      .scrollBarColor(Color.Gray) // 滚动条颜色
      .scrollBarWidth(10) // 滚动条宽度
      .friction(0.6)
      .edgeEffect(EdgeEffect.None)
      .onScroll((xOffset: number, yOffset: number) => {
        console.info(xOffset + ' ' + yOffset)
      })
      .onScrollEdge((side: Edge) => {
        console.info('To the edge')
      })
      .onScrollEnd(() => {
        console.info('Scroll Stop')
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
  }
}

更多关于HarmonyOS 鸿蒙Next scroll嵌套滚动，nestedScroll设置问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


不用List会不会有性能问题，比如Android的ListView可以做到item复用，

在HarmonyOS鸿蒙Next中，scroll嵌套滚动时，nestedScroll属性的设置涉及到父容器与子容器的滚动交互。nestedScroll属性用于控制嵌套滚动的行为，允许父容器和子容器在滚动时进行协调。

在鸿蒙Next中，nestedScroll属性通常与ScrollView或ListContainer等组件一起使用。默认情况下，子容器的滚动会优先于父容器的滚动。当子容器滚动到边界时，父容器才会开始滚动。

要设置nestedScroll，可以在父容器或子容器的布局文件中进行配置。例如，在父容器的ScrollView中设置nestedScroll属性为true，表示允许嵌套滚动。如果设置为false，则父容器不会响应子容器的滚动事件。

在代码中，可以通过setNestedScrollEnabled方法来动态控制nestedScroll的行为。例如，scrollView.setNestedScrollEnabled(true)表示启用嵌套滚动。

需要注意的是，nestedScroll的实现依赖于系统的滚动机制，开发者需要确保父容器和子容器的滚动逻辑正确配置，以避免滚动冲突或不预期的行为。

回到顶部