HarmonyOS 鸿蒙Next:我这个list滚动不到底部是什么问题(有9条数据但是只能滚动到第8条)
HarmonyOS 鸿蒙Next:我这个list滚动不到底部是什么问题(有9条数据但是只能滚动到第8条)
import { MaintainBean } from ‘…/bean/MaintainBean’;
/**
- 维护页面 */ @Component export default struct MaintainPage { @StorageLink(‘systemBarHeight’) systemBarHeight: number = 0 //搜素组件内名称 @State searchMsg: string = “” @State list: Array<MaintainBean> = [ new MaintainBean(‘0’, ‘姓名0’, ‘13988648800’, ‘测试服务有限公司’, true), new MaintainBean(‘1’, ‘姓名1’, ‘13988648800’, ‘测试咨询服务有限公司’, true), new MaintainBean(‘2’, ‘姓名2’, ‘13988648800’, ‘测试城服务有限公司’, true), new MaintainBean(‘3’, ‘姓名3’, ‘13988648800’, ‘测试咨询服务有限公司’, true), new MaintainBean(‘4’, ‘姓名4’, ‘13988648800’, ‘测试城咨询服务有限公司’, false), new MaintainBean(‘5’, ‘姓名5’, ‘13988648800’, ‘测试询服务有限公司’, true), new MaintainBean(‘6’, ‘姓名6’, ‘13988648800’, ‘测试询服务有限公司’, true), new MaintainBean(‘7’, ‘姓名7’, ‘13988648800’, ‘测试询服务有限公司’, false), new MaintainBean(‘8’, ‘姓名8’, ‘13988648800’, ‘测试询服务有限公司’, true), new MaintainBean(‘9’, ‘姓名9’, ‘13988648800’, ‘测试服务有限公司’, true), ]
build() { Column() { Row().height(px2vp(this.systemBarHeight)) Text(‘经销商维护’) .fontColor(’#333333’) .fontSize(17) .padding({ left: 12, top: 10, bottom: 10 }) .width(‘100%’) .fontWeight(FontWeight.Bold) .backgroundColor(Color.White) Stack({ alignContent: Alignment.End }) { TextInput({ text: this.searchMsg, placeholder: ‘请输入搜索内容’, }) .onChange((value) => { this.searchMsg = value; }) .margin({ top: 15, left: 12, right: 12 }) .padding({ left: 16, top: 7, bottom: 7 }) .fontSize(13) .placeholderFont({ size: 13 }) .backgroundColor(Color.White) .height(32) }
List({ initialIndex: 0 }) {
ForEach(this.list, (item: MaintainBean) => {
ListItem() {
this.ItemView(item)
}
}, (item: MaintainBean) => item.id)
}.width('100%').height('100%').edgeEffect(EdgeEffect.None).scrollBar(BarState.On)
}.height('100%').backgroundColor('#F5F5F5')
}
@Builder ItemView(bean: MaintainBean) { Row() { Column() { Row() { Text(bean.name).fontSize(18).fontColor(’#333333’) Text(bean.phone).fontSize(15).fontColor(’#333333’).margin({ left: 8 }) }.margin({ left: 16, top: 16 })
Text(bean.content).fontColor('#7B7B7B').fontSize(14).margin({ top: 8, left: 16, bottom: 16 })
}.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start).layoutWeight(1)
Image(bean.isUsed ? $rawfile('ic_maintain_usable.png') : $rawfile('ic_maintain_not_applicable.png'))
.width(80)
.height(80)
.margin({ right: 30 })
}.margin({ left: 12, right: 12, top: 12 }).borderRadius(12).backgroundColor(Color.White)
} }
更多关于HarmonyOS 鸿蒙Next:我这个list滚动不到底部是什么问题(有9条数据但是只能滚动到第8条)的实战教程也可以访问 https://www.itying.com/category-93-b0.html
将 list的height(“100%”)调整为 height(“85%”) 也可以显示全部信息
更多关于HarmonyOS 鸿蒙Next:我这个list滚动不到底部是什么问题(有9条数据但是只能滚动到第8条)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
去掉list组件的高度,换成layoutWeight(1),占满column组件剩余的高度 [文档]
明白了,感谢,
大佬有实现过list单选反选效果吗,
- [ ] 选项一
- [ ] 选项二
- [ ] 选项三
- 我还没研究过,list中倒序排列吗
list高度的问题,height去掉换
.layoutWeight(1)
有大佬可以解释一下为什么吗
因为嵌套的组件,100%也是按手机整个屏幕算的。
可是把list height去掉显示也不全是为什么,此时list的高度不是靠子组件撑起来的,也就是当前页面剩余的高度吗,
-
要看父布局,是Column组件,其中的子组件都没有给高度 Column布局容器会对其子元素进行尺寸计算和布局排列 如果给除了List以外的三个子组件高度,不给list高度,也可以让list中的内容展示完整
-
你说的靠子组件撑起来,可以使用flex布局,这样,如果其中的子组件都不给高度,那么list的数据也是展示完整的
说错了哈,是有10条数据
在HarmonyOS鸿蒙Next中,List组件滚动不到底部的问题可能是由于以下原因之一导致的:
- 布局问题:确保List组件的高度和父容器的高度设置正确,避免高度计算错误导致滚动区域不足。
- 数据绑定问题:检查数据源是否正确绑定到List组件,确保所有数据项都被正确渲染。
- 滚动条设置:确认List组件的滚动条设置是否正确,可能是滚动条被隐藏或未正确响应滚动事件。
- UI组件限制:某些UI组件可能有默认的最大高度或行数限制,检查是否有此类限制。
- 开发者工具问题:确保使用的开发者工具版本与HarmonyOS版本兼容,避免因工具问题导致的显示异常。
建议检查以上几点,确保List组件的布局、数据绑定和滚动设置正确。