HarmonyOS 鸿蒙Next 当scroll组件内嵌套其他滚动组件并同用一个new Scroller时，获取到的yOffset始终为0

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 当scroll组件内嵌套其他滚动组件并同用一个new Scroller时，获取到的yOffset始终为0

@Entry
@Component
struct Index {
 scroller: Scroller = new Scroller;
 Scroll(this.scroller) {
   WaterFlow({ scroller: this.scroller }) {
   }
 }
 .onDidScroll(() => {
   console.log(=======》${this.scroller.currentOffset().yOffset})
   // yOffset始终为0
  })


更多关于HarmonyOS 鸿蒙Next 当scroll组件内嵌套其他滚动组件并同用一个new Scroller时，获取到的yOffset始终为0的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
11 回复
你这写法不对吧，官方文档上明确写了同一个控制器不可以控制多个容器组件。

更多关于HarmonyOS 鸿蒙Next 当scroll组件内嵌套其他滚动组件并同用一个new Scroller时，获取到的yOffset始终为0的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


对 我的问题 可能是因为我给瀑布流加了高度 所以有两个滚动条

import { hilog } from '[@kit](/user/kit).PerformanceAnalysisKit'

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  ds: WaterDateSource = new WaterDateSource()
  scroller: Scroller = new Scroller()

  aboutToAppear(): void {
    for (let i = 0; i < 100; i++) {
      this.ds.list.push(i)
    }
  }

  build() {
    Scroll(this.scroller) {
      WaterFlow({ scroller: this.scroller }) {
        LazyForEach(this.ds, (item: number) => {
          FlowItem() {
            Text(item.toString())
              .height('20vp')
              .width('50vp')
              .backgroundColor(Color.Green)
          }
        })
      }.columnsTemplate('1fr 1fr')
      // .height('100%')
      .onDidScroll(() => {
        hilog.debug(0x000000, 'rainrain', 'water flow')
      })
    }.onDidScroll(() => {
      hilog.debug(0x000000, 'rainrain', 'scroll')
    })
  }
}

class WaterDateSource implements IDataSource {
  private listener: DataChangeListener | undefined = undefined
  list: number[] = []

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    this.listener = listener
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    this.listener = undefined
  }
}

谢谢，是我自己的原因，瀑布流加了高度，所有有两个滚动条，去掉就好了

添加说明：上面的代码是可以正常滚动的，不然onDidScroll里面的console.log(`${this.scroller.currentOffset().yOffset}`)打印日志不会输出的，之所以共用一个scoller是不想有两个滚动区域。

先说明一个 所有滑动组件的原理，就是组件里的所有组件的高度加起来。是超过一个屏幕。所谓的滑动就是由滑动组件控制渲染范围。 然后，onDidScroll 可以执行，这是外围Scroll 执行了。所以，代表内部WaterFlow 的高度是超过一屏幕的。再次推断，WaterFlow是一次加载了所有内容。填满了Scroll.因为WaterFlow本身没有滑。yOffset所以一直是0 如果需要WaterFlow 控制滑动，其实也简单，给WaterFlow一个高度就行，不管是 100% 还是 100vp就可以了。代码放楼下 最后 scroller 的问题，scroll不设置Scroller也能滑。也就是滚动区域不根据设置Scroller来的，而是scroller里面自带的属性。两个组件共用一个Scroller .后设置的生效。如果需要嵌套滑动，有NestedScroll

scoller只能给一个，应该是子控件生效。没指定高度，那可能子控件直接全加载了吧。所以滑不了。

scoller可以共用，我的WaterFlow上面还有能容，WaterFlow是两列的，WaterFlow上面的内容是屏幕的100%，所以得外层套一个scroll，如果不共用的话会出现两个滚动区域都能滑动，我把WaterFlow去掉后yOffset就有正常值了，而且WaterFlow的onDidScroll是不执行的，所以证明WaterFlow用的就是外层scroll的滚动。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5#scroller ‘同一个控制器不可以控制多个容器组件’

我这个 ‘滑不了’表述的确实不对。意思倾向滑动异常

在HarmonyOS鸿蒙Next中，当scroll组件内嵌套其他滚动组件并共用一个new Scroller实例时，如果获取到的yOffset始终为0，这通常是由于滚动事件未正确传递或处理所导致。

HarmonyOS的滚动组件（如Scroll）内部维护了各自的滚动状态，包括偏移量（offset）。当嵌套滚动组件共用同一Scroller实例时，滚动状态的更新可能因事件分发机制或状态管理不当而出现问题。每个滚动组件应当有独立的Scroller实例来管理其滚动动画和状态，以确保滚动行为的正确性和独立性。

检查以下方面可能有助于解决问题：

  • 确保每个滚动组件使用独立的Scroller实例。
  • 检查滚动事件是否正确分发到嵌套的滚动组件。
  • 验证嵌套滚动组件是否已正确设置滚动监听器，并检查监听器中yOffset的更新情况。
  • 审查布局和样式设置，确保嵌套滚动组件的滚动区域未被意外限制或隐藏。

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

回到顶部