HarmonyOS 鸿蒙Next 在scroll中嵌套list组件时滑动到底部scroll和list的滑动冲突问题

发布于 1周前 作者 yuanlaile 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 在scroll中嵌套list组件时滑动到底部scroll和list的滑动冲突问题

在scroll中嵌套list组件的时候,滑动到底部时,只是触发了list的onReachEnd方法,但是我想触发的是scroll的onReachEnd 这是list的代码:

[@Builder](/user/Builder)
listView() {
  List() {
    ForEach(this.dataArray, (item: number) => {
      ListItem() {
        this.contentItem(item) //主内容
      }
    })
  }
  .onScrollStart(() => {
    //这里是可以触发的
    console.log('1111')
  })
  .scrollBar(BarState.Off)
  .nestedScroll({
    scrollForward: NestedScrollMode.PARENT_FIRST,
    scrollBackward: NestedScrollMode.SELF_FIRST
  })
  .onReachEnd(() => {
    console.log('4444')
  })
  .edgeEffect(EdgeEffect.None, { alwaysEnabled: true })
  .width('100%')
  .layoutWeight(1)
}

这个是scroll的代码:

Scroll() {
  Column() {
    this.listView()
  }
  .layoutWeight(1)
  .width('100%')
}
.scrollBar(BarState.Off)
.onReachEnd(() => {
  //这里无法触发,期望是这里可以触发。
  console.log('2222')
})

.width(‘100%’) .layoutWeight(1)

这种情况应该如何解决啊?

2 回复
自定义组件通过[@state](/user/state) [@link](/user/link) 把list触发的onReachEnd的状态传给Scroll,这个状态变化的时候,自己在执行下Scroll的onReachEnd的方法里面代码逻辑就行

针对HarmonyOS 鸿蒙Next在scroll中嵌套list组件时滑动到底部出现的scroll和list滑动冲突问题,以下是一些解决方案:

  1. 检查布局配置:确保Scroll和List组件的布局配置正确,特别是高度设置。避免为List设置固定高度,可以尝试将其高度设置为“auto”,以确保List能够根据需要自动调整高度。
  2. 设置NestedScroll属性:在Scroll组件中,可以设置nestedScroll属性,通过调整scrollForward和scrollBackward为NestedScrollMode.PARENT_FIRST,让外层Scroll优先处理滑动事件,从而避免子List响应不必要的滑动。
  3. 检查scrollDirection属性:确保Scroll和List组件的scrollDirection属性设置正确,以匹配预期的滚动方向。
  4. 使用onTouch事件:在嵌套滚动容器的场景下,建议使用onTouch事件来替代parallelGesture监听,因为onTouch事件不会参与到手势竞争,从而避免滚动异常。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部