HarmonyOS 鸿蒙Next 救命 Swiper组件怎样做到真正的懒加载

已经给Swiper组件用上lazyforeach了，一些该设置的属性也设置了，但是当我往下一页滑动时还是会加载两页（触发了两个子组件的aboutToAppear函数），研究了好多天了，救救小弟，代码如下：

Swiper(this.swiperController) {
  // @ts-ignore
  LazyForEach(this.data, (item: BookPageBean) => {
    BookPageItem({ item: item })
  }, item => item)
}
.width('100%')
.height('100%')
.cachedCount(0)
.indicator(false)
.loop(false)
.curve(Curve.Linear)
.onChange((index: number) => {
  console.info("tag", "onChange:" + index.toString())
})

BookPageItem代码大概如下：

@Component
export default struct BookPageItem {
  aboutToAppear() {
    console.log("tag", "aboutToAppear item:" + this.item.id)
  }

  ...
}

更多关于HarmonyOS 鸿蒙Next 救命 Swiper组件怎样做到真正的懒加载的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 1楼•5 天前

预加载一页很合理嘛，

基本信息

这是一段测试文本。

这是另一段测试文本。

更多关于HarmonyOS 鸿蒙Next 救命 Swiper组件怎样做到真正的懒加载的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 2楼•5 天前

js/ts 不具备完全确定性，

htzhanglong 3楼•5 天前

cachedCount 这个需要设置吧

gougou168 4楼•5 天前

设成1就会变成一开始进入加载两页，后面每滑一页预加载下一页，设成0一开始进入加载1页，但是一滑动就会一次性加载后面的第二第三页，在想怎样才能做成安卓那种翻一页，那一页显示了才去加载数据。

zlyuanteng 5楼•5 天前

你说的这个设成1或0后的逻辑没问题呀，显示一页，留一页供滑动用，一旦滑动就加载第三页，这也是为了用户体验考虑不是？等用户滑动时临时加载肯定影响体验了吧。

vueper 6楼•5 天前

另外，这个逻辑影响你应用性能了还是什么原因不能接受？

itying888 7楼•5 天前

在HarmonyOS中，Swiper组件实现真正的懒加载可以通过LazyForEach和ListItem结合使用。LazyForEach用于动态加载数据，ListItem用于渲染每一项内容。通过LazyForEach的onAppear和onDisappear回调，可以控制数据的加载和卸载，从而实现懒加载。具体实现如下：

使用LazyForEach遍历数据源，LazyForEach会根据当前可见区域动态加载数据。
在ListItem中定义每一项的UI，ListItem会在进入可视区域时触发onAppear回调，离开时触发onDisappear回调。
在onAppear回调中加载数据，在onDisappear回调中释放资源。

示例代码：

@Entry
@Component
struct SwiperLazyLoad {
  private data: number[] = [1, 2, 3, 4, 5];

  build() {
    Swiper() {
      LazyForEach(this.data, (item: number) => {
        ListItem() {
          Text(`Item ${item}`)
            .onAppear(() => {
              console.log(`Item ${item} appeared`);
            })
            .onDisappear(() => {
              console.log(`Item ${item} disappeared`);
            });
        }
      });
    }
  }
}

通过这种方式，Swiper组件可以实现真正的懒加载，仅在需要时加载数据，减少内存占用和性能开销。

nodeper 8楼•5 天前

在HarmonyOS鸿蒙Next中，Swiper组件实现真正的懒加载可以通过以下方式：

使用lazyForEach：lazyForEach允许在Swiper中动态加载子组件，只有在子组件进入可视区域时才进行渲染，减少初始加载压力。
结合onPageChange事件：通过监听Swiper的页面切换事件，在页面切换时动态加载或卸载内容，确保只有当前页面和相邻页面的内容被加载。
自定义懒加载逻辑：在Swiper的每个子组件中，通过判断是否在可视区域内来决定是否加载数据或渲染内容，进一步优化性能。

通过这些方法，可以有效实现Swiper组件的懒加载，提升应用性能。