The scroll bar component ScrollBar jumps when sliding

#harmonyos #scrollbar #listitemgroup #childrenmainsize

Read the original article：The scroll bar component ScrollBar jumps when sliding

Problem Description

The ScrollBar works with the List component, and lazy loading is used to load the subcomponent ListItem on demand. However, when sliding the ScrollBar, if the ListItem continues to load, the sliding distance of the ScrollBar component will change suddenly.

Background Knowledge

LazyForEach is an interface that iteratively renders array-type data and creates corresponding components during each iteration. Its data source needs to implement IDataSource to manage listeners and notify LazyForEach of data updates.
childrenMainSize : Sets the size information of the child components of the List component in the main axis direction.
ListItemGroup : This component is used to display list item groups. Its width fills the List component by default and must be used with the List component.
ScrollBar : Scroll bar component, used with scrollable components such as ArcList , List , Grid , Scroll , and WaterFlow.

Troubleshooting Process

Check whether LazyForEach is used for lazy traversal: In lazy traversal scenarios, when the heights of ListItemGroup contents vary, the ScrollBar component needs to obtain the height of the ListItemGroup.

Analysis Conclusion

When the heights of the ListItemGroup contents vary during group traversal, LazyForEach cannot determine the height of the child components.

Solution

Use the childrenMainSize API to set the height of the ListItemGroup contents in advance.

Before the page loads, use the splice method provided by the ChildrenMainSize object to batch add, delete, and modify the size information of child components in the main axis direction.

aboutToAppear(): void {
  let childrenSize: Array<number> = []
  LIST_DATA.forEach((data: GroupItemSource) => {
    childrenSize.push(Math.ceil(data.dataArray.length / 4) * this.listItemHeight + this.groupHeaderHeight)
  })
  this.childrenSize.splice(0, 3, childrenSize)
  this.groups.pushInitData(LIST_DATA)
}

DEV Community