HarmonyOS 鸿蒙Next 滚动条组件ScrollBar滑动时跳动

可以参考以下代码

export class MyDataSource implements IDataSource {
dataArray: HSFileItemForOperation[] = [];
private listeners: DataChangeListener[] = []

public pushInitData(dataArray: HSFileItemForOperation[]) {
for (let i = 0; i < dataArray.length; i++) {
this.dataArray.push(dataArray[i])
}

this.notifyDataReload()
}

public getData(index: number): HSFileItemForOperation {
return this.dataArray[index]
}

// 数据源的数据总量
public totalCount(): number {
return this.dataArray.length;
}

notifyDataReload(): void {
this.listeners.forEach(listener => {
listener.onDataReloaded()
})
}

registerDataChangeListener(listener: DataChangeListener): void {
}

unregisterDataChangeListener(listener: DataChangeListener): void {
}
}

[@Observed](/user/Observed)
export class HSFileItemForOperation implements IDataSource {
dataArray: number[] = [];

public pushData(dataArray: number[]) {
for (let i = 0; i < dataArray.length; i++) {
this.dataArray.push(dataArray[i])
}
}

constructor(dataArray: number[]) {
this.dataArray = dataArray
}

// 返回指定索引位置的数据
public getData(index: number): number {
return this.dataArray[index];
}

// 数据源的数据总量
public totalCount(): number {
return this.dataArray.length;
}

registerDataChangeListener(listener: DataChangeListener): void {
}

unregisterDataChangeListener(listener: DataChangeListener): void {
}
}

// // 模拟数据
export const FILEITEM_LIST: HSFileItemForOperation[] = [
new HSFileItemForOperation([
0, 1, 2, 3, 4,
]),
new HSFileItemForOperation([
21, 22, 23,
24
]),
new HSFileItemForOperation([
31, 32, 33, 34, 35, 36, 37
]),
new HSFileItemForOperation(
[38, 39,])
]

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page {
private scroller: Scroller = new Scroller()

build() {
Column() {
Stack() {
Scroll(this.scroller) {
Column() {
TabsView()
}
}
.width('100%')
.height('100%')
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
}
.width('100%')
.height('100%')
.alignContent(Alignment.Top)
}
}

[@Component](/user/Component)
export struct TabsView {
private tabController: TabsController = new TabsController()
private groups: MyDataSource = new MyDataSource();
private scroller: Scroller = new Scroller()
[@State](/user/State) childrenSize: ChildrenMainSize = new ChildrenMainSize(120)

aboutToAppear(): void {
this.childrenSize.splice(0, 3, [280, 160, 280, 160])
this.groups.pushInitData(FILEITEM_LIST)
}

build() {
Tabs({ controller: this.tabController }) {
TabContent() {
Stack({ alignContent: Alignment.End }) {
List({ scroller: this.scroller }) {
LazyForEach(this.groups, (headItem: HSFileItemForOperation, index: number) => {
ReusableListGroupComponent({
group: headItem,
index: index
})
}, (headItem: number) => headItem.toString() + Math.random() * 10)
}
.childrenMainSize(this.childrenSize)
.width('100%')
.height('100%')
.lanes(4)
.sticky(StickyStyle.Header)
.backgroundColor(Color.White)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)

ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical, state: BarState.Auto }) {
Stack() {
Image($r('app.media.startIcon'))
.width(60)
.height(44)
.borderRadius({
topLeft: 22,
bottomLeft: 22
})
}
}
.backgroundColor(Color.Green)
.hitTestBehavior(HitTestMode.Transparent)
}
}.tabBar('test')
}
}

[@Component](/user/Component)
struct ReusableListGroupComponent {
[@ObjectLink](/user/ObjectLink) group: HSFileItemForOperation
[@Prop](/user/Prop) index: number
[@State](/user/State) childrenSize: ChildrenMainSize = new ChildrenMainSize(120)

[@Builder](/user/Builder)
itemHead(text: string) {
Text(text)
.fontSize(20)
.backgroundColor(0xAABBCC)
.width("100%")
.height(40)
}

build() {
ListItemGroup({ header: this.itemHead('group' + this.index.toString()) }) {
LazyForEach(this.group, (item: number, index: number) => {
ListItem() {
// 使用可复用自定义组件
ReusableChildComponent({ item: item })
.onAppear(() => {
console.log('ReusableChildComponent' + index)
})
}
}, (item: number) => item.toString() + Math.random())
}
.childrenMainSize(this.childrenSize)
}
}

[@Reusable](/user/Reusable)
[@Component](/user/Component)
struct ReusableChildComponent {
[@State](/user/State) item: number = 0;

aboutToReuse(params: Record<string, number>) {
this.item = params.item;
}

build() {
Column() {
Image($r('app.media.startIcon'))
.objectFit(ImageFit.Fill)
.layoutWeight(1)
Text(`图片${this.item}`)
.fontSize(16)
.textAlign(TextAlign.Center)
}
.width('100%')
.height(120)
.backgroundColor(0xF9CF93)
}
}