List/LazyForEach 分页查询请求回来的数据不知道哪里出问题，每次请求数据回来后页面都会跳到第一条，正常应该是一页一页往下翻才对。我写了个例子，代码如下，Index页面有问题，TestPage页面是组装数据的，显示正常 HarmonyOS 鸿蒙Next

List/LazyForEach 分页查询请求回来的数据不知道哪里出问题，每次请求数据回来后页面都会跳到第一条，正常应该是一页一页往下翻才对。我写了个例子，代码如下，Index页面有问题，TestPage页面是组装数据的，显示正常 HarmonyOS 鸿蒙Next

import { KeyMap } from '../model/KeyMap';
import { LazyData } from '../model/LazyData';
import { promptAction, router } from '@kit.ArkUI';
import { rcp } from '@kit.RemoteCommunicationKit';
import { DictContent, DictData } from '../model/DictData';
import { PageInfos } from '../model/PageInfos';

@Component
struct Index {
  @State loading: boolean = false
  @State noMoreShow: boolean = false
  @State dataList: LazyData<KeyMap> = new LazyData();
  @State query : PageInfos = new PageInfos(0, 3)

  aboutToAppear(): void {
    this.requestForData()
  }

  requestForData(){
    if (this.loading){
      return
    }
    this.loading = true
    const session = rcp.createSession();
    let req = new rcp.Request("http://192.168.0.174:8888/api/dictDetail" + "?dictName=mqtt_log_type" + "&page=" + this.query.page + "&size=" + this.query.size, "GET", { 'accept': 'application/json' }, this.query);
    session.fetch(req).then((response: rcp.Response) => {
      this.loading = false
      let dictData : DictData = JSON.parse(JSON.stringify(response)) as DictData
      if (dictData != undefined && dictData.content != undefined){
        if (this.query.page == 0){
          this.dataList = new LazyData()
        }
        let dictContent: DictContent[]  = dictData.content
        if (dictContent.length > 0){
          let count = this.dataList.totalCount()
          for (let i = 0; i < dictContent.length; i++) {
            let map: KeyMap = new KeyMap()
            map.key = `${dictContent[i].label} + ${count + i}`
            map.value = dictContent[i].value
            this.dataList.pushData(map)
          }
        }
        if (dictContent.length < this.query.size){
          //没有更多数据
          this.noMoreShow = true
        } else {
          this.query.nextPage()
        }
      }
    }).catch((err: Error)=>{
      promptAction.showToast({
        message: err.message,
        duration: 3000,
        bottom: "center",
      })
    });
  }

  build() {
    Column(){
      Image($r('app.media.ic_right'))
        .height(40)
        .width(40)
        .borderRadius(20)
        .padding(10)
        .objectFit(ImageFit.Auto)
        .backgroundColor(Color.Gray)
        .onClick(()=>{
          router.pushUrl({url: "pages/TestPage"})
        })

      if (this.loading){
        LoadingProgress()
          .width(48)
          .height('100%')
          .color(Color.Grey)
      } else {
        if (this.dataList.totalCount() > 0){
          List({ space: 3}){
            LazyForEach(this.dataList, (item: KeyMap)=>{
              ListItem(){
                Row() {
                  Text(item.key)
                    .fontSize(14)
                    .fontColor(Color.Black)

                  Text(item.value)
                    .fontSize(14)
                    .fontColor(Color.Black)
                }
                .width('100%')
                .height(250)
                .alignItems(VerticalAlign.Center)
                .justifyContent(FlexAlign.SpaceBetween)

              }

            }, (item: KeyMap, index: number) => { return item.key + '-' + index.toString(); })

            ListItem(){
              Text("没有更多数据")
                .fontSize(16)
                .fontColor(Color.Black)
                .width('100%')
                .height(40)
                .textAlign(TextAlign.Center)
                .visibility(this.noMoreShow && this.dataList.totalCount() > 0 ? Visibility.Visible : Visibility.None)
            }
          }
          .width('100%')
          .height('100%')
          .padding({ left: 10, right: 10})
          .scrollBar(BarState.Off)
          .onReachEnd(()=>{
            if (!this.noMoreShow){
              //TODO 存在上划UI跳回到第一条，正常应该是在原来那条
              this.requestForData()
            }
          }).divider({
            strokeWidth: 1,
            startMargin: 0,
            endMargin: 0,
            color: '#ffe9f0f0'
          })
        }
      }
    }
    .width('100%')
    .height('100%')
  }
}

更多关于List/LazyForEach 分页查询请求回来的数据不知道哪里出问题，每次请求数据回来后页面都会跳到第一条，正常应该是一页一页往下翻才对。我写了个例子，代码如下，Index页面有问题，TestPage页面是组装数据的，显示正常 HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好，当数据更新时，List 可能会重新渲染，导致滚动位置丢失。

需要提供一个唯一的 key 给 LazyForEach，让 List 能够正确地追踪每个 ListItem。

key 函数: (item: KeyMap, index: number) => { return item.key; }

更多关于List/LazyForEach 分页查询请求回来的数据不知道哪里出问题，每次请求数据回来后页面都会跳到第一条，正常应该是一页一页往下翻才对。我写了个例子，代码如下，Index页面有问题，TestPage页面是组装数据的，显示正常 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，List或LazyForEach组件在分页查询时，页面跳回第一条的问题通常与数据更新机制或状态管理有关。以下是一些可能的原因和解决方案：

  1. 数据更新机制问题：List或LazyForEach在数据更新时会重新渲染，导致页面跳回第一条。确保在分页请求时，新数据是追加到现有数据列表的末尾，而不是替换整个列表。你可以使用concat方法将新数据追加到现有数据中，而不是直接赋值。

  2. 状态管理问题：鸿蒙Next的状态管理机制可能未正确维护当前滚动位置。确保在数据更新时，List或LazyForEach的滚动位置不被重置。你可以使用scrollToIndex方法在数据更新后手动恢复到之前的滚动位置。

  3. 数据源问题：检查数据源是否正确处理分页逻辑。确保每次分页请求返回的数据是预期的分页数据，而不是重新返回所有数据。

  4. 组件生命周期问题：确保在组件生命周期中正确管理数据和状态。例如，在onPageShow或onPageHide中正确处理数据的加载和更新，避免不必要的数据重置。

  5. 代码逻辑问题：检查代码逻辑，确保在分页请求时没有错误的操作导致数据重置或页面跳转。例如，确保在分页请求成功后，数据是正确追加而不是替换。

通过以上几点检查和调整，可以有效解决List或LazyForEach在分页查询时页面跳回第一条的问题。

回到顶部