HarmonyOS鸿蒙Next中求助使用lazyforeach每次向上滑动多加载12条数据

HarmonyOS鸿蒙Next中求助使用lazyforeach每次向上滑动多加载12条数据

你好，每次向上滑动后无法加载12条，加载到24条后又变成11了，这个end不是累加的，想问下该如何解决

@Entry @Component struct ListRefreshLoad { lazyDataList: MyDataSource = new MyDataSource() @State arr: Array<Record<string, string>> = [ { ‘Type’: ‘普通红包’, ‘Money’: ‘1’, ‘TakenCount’: ‘12’, ‘TotalCount’: ‘39’ }, { ‘Type’: ‘普通红包’, ‘Money’: ‘2’, ‘TakenCount’: ‘12’, ‘TotalCount’: ‘39’ }, { ‘Type’: ‘普通红包’, ‘Money’: ‘3’, ‘TakenCount’: ‘12’, ‘TotalCount’: ‘39’ }, { ‘Type’: ‘普通红包’, ‘Money’: ‘4’, ‘TakenCount’: ‘12’, ‘TotalCount’: ‘39’ }, { ‘Type’: ‘普通红包’, ‘Money’: ‘5’, ‘TakenCount’: ‘12’, ‘TotalCount’: ‘39’ }, { ‘Type’: ‘普通红包’, ‘Money’: ‘6’, ‘TakenCount’: ‘12’, ‘TotalCount’: ‘39’ }, { ‘Type’: ‘普通红包’, ‘Money’: ‘7’, ‘TakenCount’: ‘12’, ‘TotalCount’: ‘39’ }, { ‘Type’: ‘普通红包’, ‘Money’: ‘8’, ‘TakenCount’: ‘12’, ‘TotalCount’: ‘39’ }, { ‘Type’: ‘普通红包’, ‘Money’: ‘9’, ‘TakenCount’: ‘12’, ‘TotalCount’: ‘39’ }, { ‘Type’: ‘普通红包’, ‘Money’: ‘10’, ‘TakenCount’: ‘12’, ‘TotalCount’: ‘39’ }, { ‘Type’: ‘普通红包’, ‘Money’: ‘11’, ‘TakenCount’: ‘12’, ‘TotalCount’: ‘39’ }, { ‘Type’: ‘普通红包’, ‘Money’: ‘12’, ‘TakenCount’: ‘12’, ‘TotalCount’: ‘39’ } ]; @State refreshing: boolean = false; @State refreshOffset: number = 0; @State refreshState: RefreshStatus = RefreshStatus.Inactive; @State canLoad: boolean = false; @State isLoading: boolean = false;

async aboutToAppear() { this.getSent(12) }

getSent(envelopeLength: number) { for (let i = 0; i < envelopeLength; i++) { this.arr.push(this.arr[i]); this.isLoading = false; } //把接口数据换成这种形式，无法上传接口数据， //目的是每次向上拉取就会增加12条数据

 this.lazyDataList.set(this.arr)
// for (let i = 0; i < envelopeLength; i++) { 
//   this.arr.push(this.arr[i]);
//   this.isLoading = false;
// }

}

@Builder footer() { Row() { LoadingProgress().height(32).width(48) Text(“加载中”) }.width(“100%”) .height(64) .justifyContent(FlexAlign.Center) // 当不处于加载中状态时隐藏组件 .visibility(this.isLoading ? Visibility.Visible : Visibility.Hidden) }

build() { Column() { Row() { Text() { Span(‘2024’) Span(‘NIAN’) } .fontSize(16) .height(22) .lineHeight(22) .fontColor(‘rgb(102, 102, 102)’) .fontFamily(‘苹方-简’) .margin({ top: 16 })

  }
  .width('100%')
  .justifyContent(FlexAlign.End)
  .alignItems(VerticalAlign.Center)
  .height(22)
  .margin({ top: 16 })
  .onClick(() => {

  })


  Text() {
    Span('YUYUY')
    Span('SEND')
  }
  .fontSize(12)
  .height(22)
  .lineHeight(22)
  .fontColor('rgb(102, 102, 102)')
  .fontFamily('苹方-简')
  .margin({ top: 16 })

  Row() {
    Text('20')
      .fontSize(16)
      .fontColor('rgb(51, 51, 51)')
      .fontFamily('苹方-简')
      .height(56)
      .lineHeight(56)
    Text('YUAN')
      .fontSize(18)
      .fontColor('rgb(51, 51, 51)')
      .fontFamily('苹方-简')
      .margin({ left: 8 })
      .height(56)
      .lineHeight(56)
  }
  .alignItems(VerticalAlign.Bottom)
  .margin({ top: 16 })
  .justifyContent(FlexAlign.Center)

  Row() {
    Text('SENFD')
      .fontSize(14)
      .fontColor('rgb(51, 51, 51)')
      .fontFamily('苹方-简')
      .margin({ top: 40 })
      .height(22)
    Text('67')
      .fontSize(16)
      .fontColor('rgb(243, 111, 100)')
      .fontFamily('苹方-简')
      .margin({ top: 40 })
      .height(22)

  }
  .margin({ bottom: 36 })

  List() {
    ForEach(this.lazyDataList, (item: object) => { //这个地方报错了，但是接口数据没有报错，只是拉不了新的12条数据，好奇怪
      ListItem() {
        Flex({ alignItems: ItemAlign.Center }) {
          Flex({ direction: FlexDirection.Column }) {
            Row() {
              Text(item['Type'])
                .fontColor('rgb(51, 51, 51)')
                .fontSize(16)
                .fontFamily('苹方-简')
                .height(22)
                .letterSpacing(0)
              Text('ping')
                .backgroundColor('#fec804')
                .borderRadius(2)
                .fontSize(18)
                .fontColor('rgb(255, 255, 255)')
                .margin({ left: 3 })
                .fontFamily('HarmonyOS Sans SC')
                .fontWeight('400')
                .textAlign(TextAlign.Center)
                .visibility(item['Type'] === '普通红包' ? Visibility.Hidden : Visibility.Visible)
            }

            Text('13.23-23')
              .fontColor('rgb(153, 153, 153)')
              .fontFamily('苹方-简')
              .fontSize(12)
              .height(17)
              .margin({ top: 8 })
              .letterSpacing(0)
          }
          .width('100%')
          .height('100%')

          Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.End }) {
            Row() {
              Text() {
                Span(item['Money'])
                Span('yuan')
              }
              .fontColor('rgb(51, 51, 51)')
              .fontSize(15)
              .fontFamily('HarmonyOS Sans SC')
              .lineHeight(21)
              .height(21)
              .letterSpacing(0)
              .textAlign(TextAlign.End)
            }

            Row() {
              Text() {
                Span(item['TakenCount'] + '/' + item['TotalCount'])
                Span('toamel')
              }
              .fontColor('rgb(153, 153, 153)')
              .fontFamily('HarmonyOS Sans SC')
              .fontSize(14)
              .height(20)
              .margin({ top: 8 })
              .letterSpacing(0)
            }
          }
          .width('100%')
          .height('100%')
        }
        .border({ width: { bottom: 1 }, color: 'rgb(238, 238, 238)' })
        .backgroundColor('#fff')
        .height(60)
        .padding({ top: 7 })
        .onClick(() => {

        })
      }
    })

    ListItem() {
      this.footer();
    }
  }
  .onScrollIndex((start: number, end: number) => {
    // 当达到列表末尾时，触发新数据加载
    if (this.canLoad && end >= this.arr.length - 1) {
      this.canLoad = false;
      this.isLoading = true;
      // 模拟新数据加载
      setTimeout(() => {
        this.getSent(end + 13)
      }, 700)
    }
  })
  .onScrollFrameBegin((offset: number, state: ScrollState) => {
    // 只有当向上滑动时触发新数据加载
    if (offset > 5 && !this.isLoading) {
      this.canLoad = true;
    }
    return { offsetRemain: offset };
  })
  .scrollBar(BarState.Off)
  // 开启边缘滑动效果
  .layoutWeight(1)
  .edgeEffect(EdgeEffect.None)
}

} }

class BasicDataSource implements IDataSource { private listeners: DataChangeListener[] = [];

public totalCount(): number { return 0; }

public getData(index: number): object { return new Object() }

registerDataChangeListener(listener: DataChangeListener): void { if (this.listeners.indexOf(listener) < 0) { this.listeners.push(listener); } }

unregisterDataChangeListener(listener: DataChangeListener): void { let pos = this.listeners.indexOf(listener); if (pos >= 0) { this.listeners.splice(pos, 1); } }

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

class MyDataSource extends BasicDataSource { private dataArray: object[] = [];

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

public set(data: object[]) { this.dataArray = data; this.notifyDataReload(); }

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


更多关于HarmonyOS鸿蒙Next中求助使用lazyforeach每次向上滑动多加载12条数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

你的意思是接口返回的数据是 12 条，但是拉出来是 11 条？打个断点调试下呢？或者 LazyForEach 里自定义设置下 key 的规则试下呢？

更多关于HarmonyOS鸿蒙Next中求助使用lazyforeach每次向上滑动多加载12条数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


是，每次向上加载增加12条数据，但是onScrollIndex((start: number, end: number)里面的start并不是累加的。

不是累加的？那 start 的值是多少，每次有调试去看吗，

在HarmonyOS鸿蒙Next中，如果你希望在使用LazyForEach时每次向上滑动多加载12条数据，可以通过控制数据源的分页加载来实现。LazyForEach是用于在列表中懒加载数据的组件，通常与List或Grid组件结合使用。

假设你有一个数据源dataList，你可以通过以下步骤实现每次滑动加载12条数据：

  1. 定义数据源和分页参数：维护一个数据源列表和一个分页参数，记录当前加载的数据位置。
@State private dataList: Array<DataType> = []; // 数据源
@State private currentIndex: number = 0; // 当前加载的位置
private pageSize: number = 12; // 每次加载的数据量
  1. 实现加载更多数据的逻辑：在滑动到列表底部时，加载下一页数据。
private loadMoreData() {
    // 模拟加载更多数据
    const newData = fetchDataFromServer(this.currentIndex, this.pageSize);
    this.dataList = this.dataList.concat(newData);
    this.currentIndex += this.pageSize;
}
  1. 在LazyForEach中使用数据源：将dataList作为LazyForEach的数据源。
List({ space: 12 }) {
    LazyForEach(this.dataList, (item: DataType) => {
        ListItem() {
            // 显示每一项的内容
            Text(item.name).fontSize(16)
        }
    }, (item: DataType) => item.id.toString())
}
.onReachEnd(() => {
    this.loadMoreData(); // 滑动到底部时加载更多数据
})
  1. 处理滑动事件：通过onReachEnd事件监听滑动到底部的情况，触发加载更多数据的逻辑。

通过这种方式，你可以在每次滑动到底部时加载12条数据，实现分页加载的效果。

在HarmonyOS鸿蒙Next中，使用LazyForEach实现每次向上滑动加载12条数据，可以通过结合List和State管理数据源。首先，定义一个State变量存储数据列表。在LazyForEach中监听滑动事件，当滑动到列表底部时，触发加载更多数据的逻辑，将新数据添加到列表中。通过LazyForEach的onAppear回调，可以判断是否到达列表底部，从而触发加载。每次加载12条数据，更新State即可实现动态加载效果。

回到顶部