HarmonyOS 鸿蒙Next中typeNode创建WaterFlow添加onScrollIndex监听

HarmonyOS 鸿蒙Next中typeNode创建WaterFlow添加onScrollIndex监听 api版本：api15

代码样例

import { NodeController, typeNode, UIContext } from "@kit.ArkUI"

@Builder
export function TestWaterFlowListenerBuilder() {
  TestWaterFlowListener()
}

@Component
export struct TestWaterFlowListener {
  controller: WaterFlowController = new WaterFlowController()

  build() {
    NavDestination() {
      NodeContainer(this.controller)
    }
  }
}

class WaterFlowController extends NodeController {
  private node: FrameNode | null = null

  makeNode(uiContext: UIContext): FrameNode | null {
    if (!this.node) {
      let waterFlowNode = typeNode.createNode(uiContext, "WaterFlow")
      //=============================================================
      // TODO: 主要代码区域
      waterFlowNode.initialize()
        .columnsTemplate("1fr 1fr 1fr")
        .columnsGap(10)
        .rowsGap(10)
        .onScrollIndex((first, last) => {
          console.log(`onScrollIndex first: ${first}, last: ${last}`)
        })
      //=============================================================
      for (let i = 0; i < 20; i++) {
        let textNode = typeNode.createNode(uiContext, "Text")
        textNode.initialize(`item ${i}`)
          .width('100%')
          .height(Math.floor(Math.random() * 100 + 200))
          .backgroundColor(`rgb(${Math.floor(Math.random() * 156 + 100)}, ${Math.floor(Math.random() * 156 +
            100)}, ${Math.floor(Math.random() * 156 + 100)})`)
        let flowItem = typeNode.createNode(uiContext, "FlowItem")
        flowItem.attribute.width("100%")
        flowItem.appendChild(textNode)
        waterFlowNode.appendChild(flowItem)
      }
      this.node = waterFlowNode
    }
    return this.node
  }
}

此时运行会报错

Error message:is not callable
Stacktrace:
    at makeNode entry (entry/src/main/ets/pages/navigation/TestWaterFlowListener.ets:27:7)

如果删掉下方代码是可以正常运行显示出来的

        .onScrollIndex((first, last) => {
          console.log(`onScrollIndex first: ${first}, last: ${last}`)
        })

试了CommonEvent如onClick是没问题的，我看api19+才有setOnScrollIndex()，如果不更新api版本，如何实现相应功能以便外部监听呢


更多关于HarmonyOS 鸿蒙Next中typeNode创建WaterFlow添加onScrollIndex监听的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

问题分析

你遇到的问题是:在 API 15 中,使用 typeNode 创建 WaterFlow 时,无法通过链式调用 .onScrollIndex() 的方式来绑定事件。

根据 HarmonyOS 文档:

文档证据:

  1. onScrollIndex 事件从 API version 11 开始支持
  2. setOnScrollIndex() 方法从 API version 19 开始支持
  3. getEvent(‘WaterFlow’) 返回 UIWaterFlowEvent,也是从 API version 19 开始支持

问题原因:

在 API 15 中:

  • ❌ onScrollIndex 不是 initialize() 返回对象的方法(因此报错 “is not callable”)
  • ❌ setOnScrollIndex() 还不存在 (API 19+ 才有)
  • ❌ UIWaterFlowEvent 接口也不可用 (API 19+ 才有)

解决方案

方案 1: 使用 attribute 对象的事件方法 (推荐但需验证)

尝试使用 attribute 对象来设置事件:

waterFlowNode.initialize()
  .columnsTemplate("1fr 1fr 1fr")
  .columnsGap(10)
  .rowsGap(10)
// 尝试通过 attribute 设置事件
waterFlowNode.attribute.onScrollIndex((first, last) => {
  console.log(`onScrollIndex first: ${first}, last: ${last}`)
})

方案 2: 使用 onReachEnd 事件替代

在 API 15 中,可以使用 onReachEnd 事件来实现类似功能:

waterFlowNode.initialize()
  .columnsTemplate("1fr 1fr 1fr")
  .columnsGap(10)
  .rowsGap(10)
// 使用 onReachEnd 监听滚动到底部
waterFlowNode.attribute.onReachEnd(() => {
  console.log('WaterFlow reached end')
  // 在这里加载更多数据
})

方案 3: 升级到 API 19+ (最佳方案)

如果项目允许,升级到 API 19 或更高版本,然后使用:

import { typeNode } from "@kit.ArkUI"
let waterFlowNode = typeNode.createNode(uiContext, "WaterFlow")
waterFlowNode.initialize()
  .columnsTemplate("1fr 1fr 1fr")
  .columnsGap(10)
  .rowsGap(10)
// API 19+ 可用
let event = typeNode.getEvent(waterFlowNode, 'WaterFlow')
event?.setOnScrollIndex((first, last) => {
  console.log(`onScrollIndex first: ${first}, last: ${last}`)
})

方案 4: 使用声明式语法(临时方案)

如果只是为了测试功能,可以先用声明式语法:

WaterFlow() {
  // ... children
}
.columnsTemplate("1fr 1fr 1fr")
.columnsGap(10)
.rowsGap(10)
.onScrollIndex((first, last) => {
  console.log(`onScrollIndex first: ${first}, last: ${last}`)
})

更多关于HarmonyOS 鸿蒙Next中typeNode创建WaterFlow添加onScrollIndex监听的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


自定义滚动监听逻辑＋事件回调实现waterflow的滚动索引监听

在鸿蒙Next中，通过typeNode创建WaterFlow组件时，使用onScrollIndex监听滚动位置变化。该监听器在WaterFlow滑动时触发，返回当前可视区域起始项的索引值。实现时需在WaterFlow组件属性中设置onScrollIndex回调函数，通过参数获取index数值。此功能适用于需要根据滚动位置动态更新内容的场景，如懒加载或状态标记更新。

在HarmonyOS Next API 15中，WaterFlow组件通过typeNode创建时，onScrollIndex方法确实不可用。根据API文档，onScrollIndex监听是在API 19+版本中通过setOnScrollIndex()方法提供的。

对于API 15版本，建议的替代方案是使用Scroll事件监听来实现类似功能：

waterFlowNode.initialize()
  .columnsTemplate("1fr 1fr 1fr")
  .columnsGap(10)
  .rowsGap(10)
  .onScroll((xOffset: number, yOffset: number) => {
    // 基于滚动偏移量计算当前可见项索引
    console.log(`Scroll position - x: ${xOffset}, y: ${yOffset}`)
    // 这里可以根据滚动位置手动计算first和last索引
  })

虽然onScroll无法直接提供first和last索引参数，但可以通过计算滚动位置和项目尺寸来估算当前可见的项目范围。如果需要精确的索引监听功能，建议升级到API 19+版本使用setOnScrollIndex()方法。

回到顶部