HarmonyOS 鸿蒙Next list列表滚动后,如何获取屏幕显示的第一条数据?

HarmonyOS 鸿蒙Next list列表滚动后,如何获取屏幕显示的第一条数据?

问题:当手指抬起的时候,获取当前屏幕显示list列表的第一条数据!

或者有什么其他办法,scroll之类可以获取到当前屏幕的第一条数据吗


更多关于HarmonyOS 鸿蒙Next list列表滚动后,如何获取屏幕显示的第一条数据?的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复 
List中onScrollIndex方法可以监听到松开滑动时的首位元素位置

参考文档：
https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-container-list-0000001477981213-V3

更多关于HarmonyOS 鸿蒙Next list列表滚动后,如何获取屏幕显示的第一条数据?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


.onScrollIndex((startIndex: number, endIndex: number) => { })

  • start: 滑动起始位置索引值。
  • end : 滑动结束位置索引值。

触发该事件的条件：列表初始化时会触发一次，List显示区域内第一个子组件的索引值或后一个子组件的索引值有变化时会触发。

在HarmonyOS中，要获取屏幕显示的第一条数据，可以使用ListContainer组件的getChildAt方法结合getTop和getBottom方法来实现。具体步骤如下：

  1. 获取ListContainer的可见子项范围。
  2. 遍历可见子项，判断其顶部和底部位置是否在屏幕可见区域内。
  3. 第一个满足条件的子项即为屏幕显示的第一条数据。

示例代码如下：

let listContainer = this.$element('listContainer');
let firstVisibleItem = null;

for (let i = 0; i < listContainer.getChildCount(); i++) {
    let child = listContainer.getChildAt(i);
    let childTop = child.getTop();
    let childBottom = child.getBottom();
    
    if (childTop >= 0 && childBottom <= listContainer.getHeight()) {
        firstVisibleItem = child;
        break;
    }
}

if (firstVisibleItem) {
    console.log('屏幕显示的第一条数据:', firstVisibleItem.getComponentData());
}

这段代码通过遍历ListContainer的子项，找到第一个完全在屏幕可见区域内的子项，并获取其数据。

回到顶部