自定义组件卡顿，怎么办啊？

// ScrollListDemoPage.ets  
import { CommonDataSource } from './CommonDataSource'  
import { LeftItemWidth, RightItemWidth, titleCount, pageSize, ListData, listItemData } from './utils'  
import { ItemComponent } from './ItemComponent'  
  
@Entry  
@Component  
struct ScrollListDemoPage {  
  // 头部标题列表，每一列的标题  
  private titleList: string[] = []  
  // 列表数据--展示的内容  
  @State listData: listItemData[] = []  
  // 列表数据垂直滚动  
  verticalScroller: Scroller = new Scroller()  
  // 列表数据横向滚动  
  horizontalScroller: Scroller = new Scroller()  
  // 左侧名称列滚动  
  leftScroller: Scroller = new Scroller()  
  // 头部标题列滚动  
  topScroller: Scroller = new Scroller()  
  // 列表数据横向滚动的距离  
  @State remainOffset: number = 0  
  // 维护一个list控制器数组，用于保存所有横向列表的 ListScroller  
  @State listScrollerArr: ListScroller[] = []  
  // list的开始下标，用来刷新当前屏幕显示的列表区域  
  @State startIndex: number = 0  
  // list的结束下标  
  @State endIndex: number = 0  
  // 列表数据源  
  private dataSource = new CommonDataSource<ListData>()  
  // 头部标题列表数据源  
  headerList = new CommonDataSource<string>()  
  // 实际处理的数据  
  showList: ListData[] = []  
  // 用来模拟上拉加载更多页  
  @State pageNum: number = 1  
  
  aboutToAppear(): void {  
    // 获取数据  
    this.loadData()  
  }  
  
  // 数据处理  
  loadData() {  
    for (let i = 0; i < titleCount; i++) {  
      this.titleList.push('标题名称' + i)  
      let itemData: listItemData = {  
        text: '内容' + i,  
        id: i + this.getRandomVal(),  
      }  
      this.listData.push(itemData)  
    }  
    this.headerList.setData(this.titleList)  
  
    for (let i = 0; i < pageSize; i++) {  
      // 每次获取下一页数据时，需要同步增加list的控制器  
      this.listScrollerArr.push(new ListScroller())  
  
      let listItemData: ListData = new ListData()  
      listItemData.fundName = '基金' + i  
      listItemData.id = '基金' + i  
      listItemData.textDataSource = new CommonDataSource<listItemData>()  
      listItemData.textDataSource.setData(this.listData)  
      this.showList.push(listItemData)  
    }  
    this.dataSource.setData(this.showList)  
  }  
  
  // 数据刷新  
  refreshData() {  
    let listData: listItemData[] = []  
    for (let i = 0; i < titleCount; i++) {  
      let text = '内容' + i + '-' + this.getRandomVal()  
      let itemData: listItemData = {  
        text,  
        id: text  
      }  
      listData.push(itemData)  
    }  
    // 只刷新当前显示在屏幕的数据  
    for (let i = this.startIndex; i <= this.endIndex; i++) {  
      this.showList[i].textDataSource.setData(listData)  
    }  
    this.dataSource.refreshDataByIndex(this.startIndex, this.endIndex, this.showList.slice(this.startIndex, this.endIndex))  
  }  
  
  // 添加数据  
  getNewListPage() {  
    let listData: listItemData[] = []  
    let showList: ListData[] = []  
    for (let i = 0; i < titleCount; i++) {  
      let text = '内容' + i + '-' + this.getRandomVal()  
      let itemData: listItemData = {  
        text,  
        id: text  
      }  
      listData.push(itemData)  
    }  
  
    let s = pageSize* this.pageNum  
    this.pageNum++  
    let e = pageSize* this.pageNum  
    for (let i = s; i < e; i++) {  
      // 每次获取下一页数据时，需要同步增加list的控制器  
      this.listScrollerArr.push(new ListScroller())  
  
      let listItemData: ListData = new ListData()  
      listItemData.fundName = '基金' + i  
      listItemData.id = '基金' + i  
      listItemData.textDataSource = new CommonDataSource<listItemData>()  
      listItemData.textDataSource.setData(listData)  
      showList.push(listItemData)  
    }  
    this.dataSource.pushDataArray(...showList)  
  }  
  
  // 生成1-100的随机数  
  getRandomVal() {  
    const min = 1;  
    const max = 100;  
    const randomInt = Math.floor(Math.random() * (max - min + 1)) + min;  
    return randomInt + ''  
  }  
  
  build() {  
    Column() {  
      // 头部标题  
      this.titleBuilder()  
      Row() {  
        // 左侧列  
        this.leftBuilder()  
        // 右侧列  
        this.rightScroll()  
        Line().height('100%').width(0.5).backgroundColor('#EEEEEE').position({x:LeftItemWidth})  
      }.justifyContent(FlexAlign.Start)  
      .alignItems(VerticalAlign.Top)  
    }.height('100%').justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)  
  }  
  
  // 头部标题  
  @Builder  
  titleBuilder() {  
    Row() {  
      Column() {  
        Text('名称')  
      }  
      .width(LeftItemWidth)  
      .height(60)  
      .backgroundColor(Color.White)  
      .justifyContent(FlexAlign.Center)  
      .alignItems(HorizontalAlign.Start)  
      .padding(10)  
  
      // 分割线  
      Line().height(60).width(0.5).backgroundColor(0xeeeeee)  
      // 头部标题列表  
      List({ scroller: this.topScroller }) {  
        LazyForEach(this.headerList, (item: string, index: number) => {  
          ListItem() {  
            Text(item)  
              .height(60)  
              .width(RightItemWidth)  
              .textAlign(TextAlign.Start)  
              .padding(10)  
              .backgroundColor(0xFFFFFF)  
          }  
        }, (item: string) => item)  
      }  
      .listDirection(Axis.Horizontal)  
      .edgeEffect(EdgeEffect.None)  
      .divider({ strokeWidth: 0.5, color: 0xeeeeee })  
      .scrollBar(BarState.Off)  
      .width('calc(100% - 100vp)').layoutWeight(1)  
      .onScrollFrameBegin((offset: number, state: ScrollState)=>{  
        this.listScrollerArr.forEach((itemScroller) => {  
          itemScroller.scrollTo({xOffset: this.topScroller.currentOffset().xOffset + offset, yOffset:0, animation: false})  
        })  
        return{offsetRemain:offset}  
      })  
    }.height(60).width('100%').justifyContent(FlexAlign.Start)  
  }  
  
  // 左侧列表  
  @Builder  
  leftBuilder(){  
    List({scroller: this.leftScroller }) {  
      LazyForEach(this.dataSource, (item: ListData, index: number) => {  
        ListItem() {  
          Column(){  
            Text(item.fundName)  
              .width(LeftItemWidth)  
              .height('100%')  
              .textAlign(TextAlign.Center)  
              .backgroundColor(0xFFFFFF)  
              .layoutWeight(1)  
            Line().width("100%").height(0.5).backgroundColor(0xeeeeee)  
          }  
        }  
        .height(100)  
      },(item: ListData, index: number) => item.fundName! + index + item.id)  
    }  
    .listDirection(Axis.Vertical)  
    .scrollBar(BarState.Off)  
    .edgeEffect(EdgeEffect.None)  
    .height('calc(100% - 60vp)')  
    .width(LeftItemWidth)  
    .visibility(Visibility.Visible)  
    .onScrollFrameBegin((offset: number, state: ScrollState) => {  
      this.verticalScroller.scrollTo({  
        xOffset: 0,  
        yOffset: this.leftScroller.currentOffset().yOffset + offset,  
        animation: false  
      })  
      return { offsetRemain: offset }  
    })  
  }  
  
  // 右侧列表  
  @Builder  
  rightScroll(){  
    Scroll(this.horizontalScroller) {  
      List({ initialIndex: 0, scroller: this.verticalScroller }) {  
        LazyForEach(this.dataSource, (item: ListData, index: number) => {  
          ListItem() {  
            ItemComponent({  
              scroller: this.listScrollerArr[index],  
              data: item,  
              scrollCallBack:(value)=>{  
                this.topScroller.scrollTo({xOffset:value, yOffset:0, animation: false})  
                this.listScrollerArr.forEach((itemScroller) => {  
                  if(itemScroller != this.listScrollerArr[index]){  
                    itemScroller.scrollTo({xOffset: value,yOffset:0, animation: false})  
                  }  
                })  
              },  
              remainOffsetCallBack:(value)=>{  
                this.remainOffset = value  
              },  
            })  
          }  
        })  
      }  
      .cachedCount(2)  
      .flingSpeedLimit(2000)  
      .listDirection(Axis.Vertical)  
      .scrollBar(BarState.Off)  
      .edgeEffect(EdgeEffect.None)  
      .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.PARENT_FIRST })  
      .onScrollFrameBegin((offset: number, state: ScrollState) => {  
        this.leftScroller.scrollTo({  
          xOffset: this.remainOffset,  
          yOffset: this.verticalScroller.currentOffset().yOffset + offset,  
          animation: false  
        })  
        return { offsetRemain: offset }  
      })  
      .onScroll(()=>{  
        this.listScrollerArr.forEach((itemScroller) => {  
          itemScroller.scrollTo({xOffset: this.remainOffset,yOffset:0, animation: false})  
        })  
      })  
      .onScrollIndex((start: number, end: number) => {  
        this.startIndex = start  
        this.endIndex = end  
      })  
      .onReachEnd(() => {  
        // 模拟上拉加载更多  
        setTimeout(() => {  
          this.getNewListPage()  
        }, 1000)  
      })  
      .onReachStart(() => {  
        // 模拟下拉刷新  
        setTimeout(() => {  
          this.refreshData()  
        }, 1000)  
      })  
  
    }  
    .position({ x: LeftItemWidth, y: 0 })  
    .onScroll((scrollOffset: number, scrollState: ScrollState) => {  
      this.topScroller.scrollTo({ xOffset: this.horizontalScroller.currentOffset().xOffset, yOffset: 0, animation: false })  
    })  
    .scrollBar(BarState.Off)  
    .edgeEffect(EdgeEffect.None)  
    .scrollable(ScrollDirection.Horizontal)  
    .backgroundColor(0xDCDCDC)  
    .height('calc(100% - 60vp)')  
    .width('calc(100% - 100vp)')  
  }  
}  
  
// ItemComponent.ets  
import { RightItemWidth, listItemData, ListData } from './utils'  
  
@Component  
export struct ItemComponent {  
  private scroller?: ListScroller = undefined  
  private scrollCallBack?: (param: number) => void  
  private remainOffsetCallBack?: (param: number) => void  
  @ObjectLink data: ListData  
  build() {  
    Column() {  
      List({ scroller: this.scroller }) {  
        LazyForEach(this.data.textDataSource, (item: listItemData, index: number) => {  
          ListItem() {  
            Text(item.text)  
              .height('100%')  
              .width('100%')  
              .textAlign(TextAlign.Start)  
              .padding(10)  
              .backgroundColor(0xFFFFFF)  
              .fontColor('#66000000')  
              .maxLines(1)  
              .textOverflow({overflow: TextOverflow.Ellipsis})  
          }  
          .width(RightItemWidth)  
        }, (item: listItemData, index: number) => JSON.stringify(item) + index + '')  
      }  
      .cachedCount(4)  
      .height('100%')  
      .width('100%')  
      .layoutWeight(1)  
      .listDirection(Axis.Horizontal)  
      .scrollBar(BarState.Off)  
      .nestedScroll({  
        scrollForward: NestedScrollMode.PARENT_FIRST,  
        scrollBackward: NestedScrollMode.PARENT_FIRST  
      })  
      .divider({ strokeWidth: 0.5, color: 0xeeeeee })  
      .edgeEffect(EdgeEffect.None)  
      .onScroll(() => {  
        if (this.remainOffsetCallBack) {  
          this.remainOffsetCallBack(this.scroller!.currentOffset().xOffset)  
        }  
      })  
      .onScrollFrameBegin((offset: number, state: ScrollState) => {  
        if (this.scrollCallBack) {  
          this.scrollCallBack(this.scroller!.currentOffset().xOffset + offset)  
        }  
        return { offsetRemain: offset }  
      })  
      Line().width("100%").height(0.5).backgroundColor(0xeeeeee)  
    }.height(100)  
  }  
}  
  
// utils.ets  
  
import { CommonDataSource } from './CommonDataSource'  
  
export const LeftItemWidth = 100  
export const RightItemWidth = 100  
// 标题列的个数  
export const titleCount = 30  
// 每页的基金数量  
export const pageSize = 20  
// 基金的总数  
export const totalCount = 400  
  
@Observed  
export class listItemData {  
  text: string = ''  
  id: string = ''  
}  
  
@Observed  
export class ListData {  
  id: string = ''  
  fundName: string = ''  
  textDataSource: CommonDataSource<listItemData> = new CommonDataSource<listItemData>()  
}  
  
// CommonDataSource.ets  
  
export class CommonDataSource<T> implements IDataSource {  
  private listeners: DataChangeListener[] = [];  
  protected originDataArray: T[] = [];  
  
  totalCount(): number {  
    return this.originDataArray.length;  
  }  
  
  getAllData(): T[] {  
    return this.originDataArray  
  }  
  
  getData(index: number) {  
    return this.originDataArray[index];  
  }  
  
  addData(index: number, data: T): void {  
    this.originDataArray.splice(index, 0, data);  
    this.notifyDataAdd(index);  
  }  
  
  pushData(data: T): void {  
    this.originDataArray.push(data);  
    this.notifyDataAdd(this.originDataArray.length - 1);  
  }  
  
  pushDataArray(...items: T[]): void {  
    for (let data of items) {  
      this.originDataArray.push(data);  
      this.notifyDataAdd(this.originDataArray.length - 1);  
    }  
  }  
  
  deleteDataUseContent(data: T): void {  
    let delIndex: number = -1  
    for (let index = 0; index < this.originDataArray.length; index++) {  
      const element = this.originDataArray[index];  
      if (data === element) {  
        delIndex = index  
      }  
    }  
    if (delIndex != -1) {  
      this.deleteData(delIndex)  
    }  
  }  
  
  deleteData(index: number): void {  
    this.originDataArray.splice(index, 1);  
    this.notifyDataDelete(index);  
  }  
  
  clear() {  
    this.originDataArray.splice(0, this.originDataArray.length)  
    this.listeners.forEach(listener => {  
      listener.onDataDelete(0)  
    })  
  }  
  
  setData(dataArray?: T[]) {  
    if (dataArray) {  
      this.originDataArray = dataArray  
    } else {  
      this.originDataArray = []  
    }  
    this.notifyDataReload()  
  }  
  
  refreshDataByIndex(start: number, end: number, dataArray: T[]) {  
    this.originDataArray.splice(start, end - start, ...dataArray);  
    this.notifyDataReload()  
  }  
  
  changeData(index: number, data: T): void {  
    this.originDataArray.splice(index, 1, data);  
    this.notifyDataChange(index);  
  }  
  
  registerDataChangeListener(listener: DataChangeListener): void {  
    if (this.listeners.indexOf(listener) < 0) {  
      this.listeners.push(listener);  
    }  
  }  
  
  unregisterDataChangeListener(listener: DataChangeListener): void {  
    const pos = this.listeners.indexOf(listener);  
    if (pos >= 0) {  
      this.listeners.splice(pos, 1);  
    }  
  }  
  
  notifyDataReload() {  
    this.listeners.forEach(listener => {  
      listener.onDataReloaded();  
    })  
  }  
  
  notifyDataAdd(index: number) {  
    this.listeners.forEach(listener => {  
      listener.onDataAdd(index);  
    })  
  }  
  
  notifyDataMove(from: number, to: number) {  
    this.listeners.forEach(listener => {  
      listener.onDataMove(from, to);  
    })  
  }  
  
  notifyDataDelete(index: number) {  
    this.listeners.forEach(listener => {  
      listener.onDataDelete(index);  
    })  
  }  
  
  notifyDataChange(index: number) {  
    this.listeners.forEach(listener => {  
      listener.onDataChange(index);  
    })  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
354.
355.
356.
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.
368.
369.
370.
371.
372.
373.
374.
375.
376.
377.
378.
379.
380.
381.
382.
383.
384.
385.
386.
387.
388.
389.
390.
391.
392.
393.
394.
395.
396.
397.
398.
399.
400.
401.
402.
403.
404.
405.
406.
407.
408.
409.
410.
411.
412.
413.
414.
415.
416.
417.
418.
419.
420.
421.
422.
423.
424.
425.
426.
427.
428.
429.
430.
431.
432.
433.
434.
435.
436.
437.
438.
439.
440.
441.
442.
443.
444.
445.
446.
447.
448.
449.
450.
451.
452.
453.
454.
455.
456.
457.
458.
459.
460.
461.
462.
463.
464.
465.
466.
467.
468.
469.
470.
471.
472.
473.
474.
475.
476.
477.
478.
479.
480.
481.
482.
483.
484.
485.
486.
487.
488.
489.
490.
491.
492.
493.
494.
495.