HarmonyOS 鸿蒙Next List组件如何让每个item都滚到顶部
HarmonyOS 鸿蒙Next List组件如何让每个item都滚到顶部
如图选中最后面几个item也需要将item置顶上去要怎么处理？
export struct ToolsRightListView {
@State toolsList: ToolsItemClass[] = [];
@State selectNumber: number=0
private listScroller: Scroller = new Scroller();
onItemClick?: (index: number) => void;
@Prop scrollNumber:number=0;
build() {
List({scroller: this.listScroller,initialIndex:this.scrollNumber}){
ForEach(this.toolsList,(item:ToolsItemClass,index:number)=>{
ListItem() {
ToolsRightListItem({toolsClass:item})
}
},(index:number)=>index.toString())
}
.width(‘100%’)
.scrollBar(BarState.Off)
.divider({strokeWidth:SizeUtil.getVp(1),color:’#E4E7ED’,startMargin:SizeUtil.getVp(4)})
.padding({top:SizeUtil.getVp(15),bottom:SizeUtil.getVp(15)})
.height(‘100%’)
.onScrollIndex((firstIndex: number) =>{
if(firstIndex!=this.scrollNumber){
this.onItemClick?.(firstIndex);
this.scrollNumber=firstIndex;
}
})
.edgeEffect(EdgeEffect.None)
.contentEndOffset(510)
}
getListData(){
getContext(this).resourceManager.getRawFileContent(‘ToolsData.json’).then(value => {
// 转换为字符串
let res: string = MyUtils.bufferToString(value);
// 解析为数据结构
this.toolsList = JSON.parse(res) as ToolsItemClass[];
})
}
aboutToAppear(): void {
this.getListData();
}
}
struct ToolsRightListItem {
@Prop toolsClass: ToolsItemClass;
build() {
Column(){
if(this.toolsClass.type==“1”){
List(){
ForEach(this.toolsClass.data,(item:ToolsDataBean1,index:number)=>{
ListItem() {
ToolsRightListItem3({toolsClass:item})
}
},(index:number)=>index.toString())
}
.width(‘100%’)
.scrollBar(BarState.Off)
.divider({strokeWidth:SizeUtil.getVp(1),color:’#E4E7ED’,startMargin:SizeUtil.getVp(4)})
.edgeEffect(EdgeEffect.None)
}else {
Text(this.toolsClass.title)
.fontColor(’#1D2129’)
.fontSize(SizeUtil.getFp(14))
.fontWeight(FontWeight.Medium)
.margin({top:SizeUtil.getVp(32)})
Grid(){
ForEach(this.toolsClass.data,(item:ToolsDataBean1,index:number)=>{
GridItem() {
ToolsRightListItem2({toolsClass:item})
}
},(index:number)=>index.toString())
}
.columnsTemplate(‘1fr 1fr 1fr’)
.layoutDirection(GridDirection.Row)
.rowsGap(SizeUtil.getVp(16))
.columnsGap(SizeUtil.getVp(12))
.padding({top:SizeUtil.getVp(16),bottom:SizeUtil.getVp(32)})
}
}
.width(‘100%’)
.height(‘auto’)
.alignItems(HorizontalAlign.Start)
}
}
struct ToolsRightListItem2 {
@Prop toolsClass: ToolsDataBean1;
build() {
Column(){
ImageTextView({
imageSrc: $r(‘app.media.components_pdftoword’),
imageWidth: SizeUtil.getVp(40),
title: this.toolsClass.title,
viewType:OrientationEnum.top,
marginSize:SizeUtil.getVp(2),
textSize:SizeUtil.getFp(10)
})
}
.width(‘100%’)
.height(‘auto’)
.alignItems(HorizontalAlign.Center)
}
}
struct ToolsRightListItem3 {
@Prop toolsClass: ToolsDataBean1;
build() {
Column(){
Text(this.toolsClass.title)
.fontColor(’#4E5969’)
.fontSize(SizeUtil.getFp(12))
.margin({top:SizeUtil.getVp(32)})
Grid(){
ForEach(this.toolsClass.data,(item:ToolsDataBean2,index:number)=>{
GridItem() {
ToolsRightListItem4({toolsClass:item})
}
},(index:number)=>index.toString())
}
.columnsTemplate(‘1fr 1fr 1fr’)
.layoutDirection(GridDirection.Row)
.rowsGap(SizeUtil.getVp(16))
.columnsGap(SizeUtil.getVp(12))
.padding({top:SizeUtil.getVp(16),bottom:SizeUtil.getVp(32)})
}
.width(‘100%’)
.height(‘auto’)
.alignItems(HorizontalAlign.Start)
}
}
struct ToolsRightListItem4 {
@Prop toolsClass: ToolsDataBean2;
build() {
Column(){
ImageTextView({
imageSrc: $r(‘app.media.components_pdftoword’),
imageWidth: SizeUtil.getVp(40),
title: this.toolsClass.title,
viewType:OrientationEnum.top,
marginSize:SizeUtil.getVp(2),
textSize:SizeUtil.getFp(10)
})
}
.width(‘100%’)
.height(‘auto’)
.alignItems(HorizontalAlign.Center)
}
}
调用的Scroller.scrollToIndex(index)方法
更多关于HarmonyOS 鸿蒙Next List组件如何让每个item都滚到顶部的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
//针对数量不固定（包括行列数量不固定），可通过除法(每行有N个就加上N-1再整除于N)判断
@State count: number = 0;
blank: number[] = []
aboutToAppear() {
setTimeout(() => {
//加载数据
this.classifyList = XXXX.getLinkData();
//有数据的行数，n为每行的列数
this.count = ((this.classifyList[this.classifyList.length -1].courseList.length) + (n-1)) / n
// xxheigtht 为每个页面可以塞满数据的行数，取整
for (let i = 0; i < xxheigtht - this.count; i++) {
//高度（xx）自己设置
this.blank.push(xx)
}
//自适应高度，调整误差用
this.blank.push(12.5)
}, Constants.LOADING_DURATION);
}
//计算一个页面大概能排满多少行数据，用foreach在最末尾循环留白，this.blank数组判断最后一组数据是否会溢出页面
Grid(){
//if判断是否是最后一组
if(XXX){
ForEach(xxx){
......
}
ForEach(this.blank, (height: number)=>{
ListItem(){
Row()
.height(height)
.width(Constants.FULL_PERCENT)
}
})
}
}
更多关于HarmonyOS 鸿蒙Next List组件如何让每个item都滚到顶部的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS中，要使Next List组件的每个item在滚动时都能自动对齐到顶部，可以通过调整List的滚动行为以及Item的布局来实现。具体操作步骤如下：
-
设置List的滚动模式：确保List组件的滚动方向设置为垂直滚动。这通常在XML布局文件中通过
ohos:scroll_direction="vertical"属性设置。 -
调整Item布局：确保每个Item的布局高度固定，或者至少具有明确的顶部对齐方式。这可以通过设置Item内部布局容器的
layout_gravity或gravity属性为top来实现。 -
监听滚动事件：在List组件上设置滚动监听器，当检测到滚动事件时，根据当前滚动的位置计算需要滚动到的目标位置，并调用List的
smoothScrollToPosition或scrollToPositionWithOffset方法，将目标位置的偏移量设置为0，以确保Item顶部对齐。 -
优化滚动动画：根据需要调整滚动动画的平滑度和速度，以提供更好的用户体验。
示例代码（伪代码，具体实现需根据API文档调整）：
list.addScrollListener(new ScrollListener() {
@Override
public void onScrollStateChanged(int state) {
if (state == ScrollState.SCROLL_STATE_IDLE) {
int firstVisiblePosition = list.getFirstVisiblePosition();
list.smoothScrollToPosition(firstVisiblePosition, 0);
}
}
});
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
