List控件加载的数据如何判断是否超过一屏
2024-12-18 15:55:31
140次阅读
0个评论
- 通过行高计算
@Entry
@Component
struct AllListItemHeight {
private itemHeightArr = [100, 150, 200, 130, 120, 110.130];
private listHeight = 700;
scroller = new ListScroller();
build() {
Column() {
Button('是否超过一屏')
.height(50)
.width('100%')
.onClick(() => {
let result = 0;
for (let i = 0; i < this.itemHeightArr.length; i++) {
result += this.itemHeightArr[i];
}
console.info(result > this.listHeight ? '超过一屏' : '没有超过一屏');
})
List({ scroller: this.scroller }) {
ForEach(this.itemHeightArr, (_: number, index: number) => {
ListItem() {
Text(index.toString())
.width('100%')
.textAlign(TextAlign.Center)
}
.height(this.itemHeightArr[index])
.align(Alignment.Center)
}, (item: number) => JSON.stringify(item))
}
.height(this.listHeight)
.width('100%')
}
}
}
2.通过getItemRect(index: number): RectResult获取子组件的大小位置,可以获取最后一个ListItem的位置大小信息进行计算
@Entry
@Component
struct GetLastItem {
private itemHeightArr = [100, 150, 200, 130, 120, 110.130];
private listHeight = 700;
scroller = new ListScroller();
build() {
Column() {
Button('是否超过一屏')
.height(50)
.width('100%')
.onClick(() => {
let result = this.scroller.getItemRect(this.itemHeightArr.length - 1);
let flag = result.x == 0 && result.y == 0 && result.width == 0 && result.height == 0
console.info(flag ? '超过一屏' : '没有超过一屏')
})
List({ scroller: this.scroller }) {
ForEach(this.itemHeightArr, (_: number, index: number) => {
ListItem() {
Text(index.toString())
.width('100%')
.textAlign(TextAlign.Center)
}
.height(this.itemHeightArr[index])
.align(Alignment.Center)
}, (item: number) => JSON.stringify(item))
}
.height(this.listHeight)
.width('100%')
}
}
}
- 通过getItemRectInGroup(index: number, indexInGroup: number): RectResult,获取最后一个ListItemGroup中的最后一个ListItem的大小和相对于List的位置进行计算
@Entry
@Component
struct GetLastGroup {
private groupItemHeightArr =
[[30, 50, 60, 40, 90, 80.60],
[50, 40, 50, 55, 77, 88.44],];
private listHeight = 700;
scroller = new ListScroller();
build() {
Column() {
Button('是否超过一屏')
.height(50)
.width('100%')
.onClick(() => {
let lastGroupIndex = this.groupItemHeightArr.length - 1;
let lastItemIndex = this.groupItemHeightArr[lastGroupIndex].length - 1;
let result = this.scroller.getItemRectInGroup(lastGroupIndex, lastItemIndex);
let flag = result.x == 0 && result.y == 0 && result.width == 0 && result.height == 0
console.info(flag ? '超过一屏' : '没有超过一屏')
})
List({ scroller: this.scroller }) {
ForEach(this.groupItemHeightArr, (itemHeight: number[], index: number) => {
ListItemGroup() {
ForEach(itemHeight, (height: number) => {
ListItem() {
Text(index.toString())
.width('100%')
.textAlign(TextAlign.Center)
}
.height(height)
.align(Alignment.Center)
}, (item: number, index: number) => JSON.stringify(item) + index)
}
}, (item: number[]) => JSON.stringify(item))
}
.height(this.listHeight)
.width('100%')
}
}
}
00
- 1回答
- 0粉丝
- 0关注
相关话题
- 如何完成挖孔屏的适配
- 【元服务】控件基础(一)
- 如何实现防截屏功能
- 如何加载和使用自定义字体
- 文件是否存在
- 如何获取设备屏幕横竖屏状态
- OpenHarmony 如何实现防截屏功能
- 如何锁定设备竖屏,使得窗口不随屏幕旋转
- HarmonyOS应用开发实战:半天实现知乎日报项目(七、知乎日报List列表下拉刷新及上滑加载更多分页的实现)
- 鸿蒙安全控件之保存控件简介
- 鸿蒙安全控件之位置控件简介
- 鸿蒙安全控件之粘贴控件简介
- 「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List和Grid组件展示数据列表
- HarmonyOS NEXT边学边玩,从零开发一款影视APP(二、首页轮播图懒加载的实现)
- Video组件如何播放图库内的某一个视频