HarmonyOS 鸿蒙Next中如何实现list循环滚动

HarmonyOS 鸿蒙Next中如何实现list循环滚动 想要用list组件实现横向循环滚动

3 回复
  1. .listDirection(Axis.Horizontal)设置横向滚动后设置一个触底方法然后重新循环

更多关于HarmonyOS 鸿蒙Next中如何实现list循环滚动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


class BasicDataSource implements IDataSource {

private listeners: DataChangeListener[] = [];

private originDataArray: string[] = [];

public totalCount(): number { return 0; }

public getData(index: number): string { return this.originDataArray[index]; }

registerDataChangeListener(listener: DataChangeListener): void { if (this.listeners.indexOf(listener) < 0) { console.info(‘add listener’); this.listeners.push(listener); } }

unregisterDataChangeListener(listener: DataChangeListener): void { const pos = this.listeners.indexOf(listener); if (pos >= 0) { console.info(‘remove listener’); this.listeners.splice(pos, 1); } }

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

notifyDataAdd(index: number): void { this.listeners.forEach(listener => { listener.onDataAdd(index); }) }

notifyDataChange(index: number): void { this.listeners.forEach(listener => { listener.onDataChange(index); }) }

notifyDataDelete(index: number): void { this.listeners.forEach(listener => { listener.onDataDelete(index); }) }

notifyDataMove(from: number, to: number): void { this.listeners.forEach(listener => { listener.onDataMove(from, to); }) } }

class MyDataSource extends BasicDataSource {

private dataArray: string[] = [];

public totalCount(): number { return this.dataArray.length * 3; }

public getData(index: number): string { return this.dataArray[index % this.dataArray.length]; }

public addData(index: number, data: string): void { this.dataArray.splice(index, 0, data); this.notifyDataAdd(index); }

public moveDataWithoutNotify(from: number, to: number): void { let tmp = this.dataArray.splice(from, 1); this.dataArray.splice(to, 0, tmp[0]) }

public pushData(data: string): void { this.dataArray.push(data); this.notifyDataAdd(this.dataArray.length - 1); }

public deleteData(index: number): void { this.dataArray.splice(index, 1); this.notifyDataDelete(index); } }

@Entry @Component struct Parent {

private data: MyDataSource = new MyDataSource();

private scroller: Scroller = new Scroller();

build() { Row() { List({initialIndex: 10, scroller: this.scroller}) { LazyForEach(this.data, (item: string) => { ListItem() { Text(item.toString()) .fontSize(16) .textAlign(TextAlign.Center) .size({height: 200, width: 200}) } .borderRadius(10) .margin(10) .backgroundColor("#FFFFFFFF") }, (item: string) => item) } .width(‘100%’) .height(‘300’) .backgroundColor("#FFDCDCDC") .listDirection(Axis.Horizontal) .scrollSnapAlign(ScrollSnapAlign.START) .friction(2) .onScrollFrameBegin((offset: number, state: ScrollState)=>{

    let currOffset = this.scroller.currentOffset().xOffset;
    let newOffset = currOffset + offset;
    let totalHeight = 220 * 10;

    if (newOffset < totalHeight * 0.5) {
      newOffset += totalHeight;
    } else if (newOffset > totalHeight * 2.5) {
      newOffset -= totalHeight;
    }

    return {offsetRemain: newOffset - currOffset }
  })
}

}

aboutToAppear(): void { for (let i = 0; i < 10; i++) { this.data.pushData(i.toString()) } } }

在HarmonyOS鸿蒙Next中实现List循环滚动，可以通过ListContainer组件结合Scroller实现。首先，创建一个ListContainer并设置适配器。然后，使用Scroller监听滚动事件，当滚动到列表末尾时，通过适配器重新加载数据，实现循环滚动效果。关键代码如下：

ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);
MyListAdapter adapter = new MyListAdapter(data);
listContainer.setItemProvider(adapter);

listContainer.setScrolledListener(new ListContainer.ScrolledListener() {
    @Override
    public void onContentScrolled(ListContainer listContainer, int dx, int dy) {
        if (isLastItemVisible()) {
            // 重新加载数据
            adapter.notifyDataChanged();
        }
    }
});

通过这种方式，可以实现List的循环滚动效果。

回到顶部