HarmonyOS 鸿蒙Next Swiper 数据为空导致页面崩溃的解决办法

HarmonyOS 鸿蒙Next Swiper 数据为空导致页面崩溃的解决办法

@Entry @Component struct Index { // 定义接口返回的轮播图数据 @State HospitalPropaganda: string[] = [] private swiperController: SwiperController = new SwiperController() async aboutToAppear() { this.getOrgInfo() } private getOrgInfo = async () => { try { const res = await this.httpBaskData() this.HospitalPropaganda = res } catch (err) { console.log(‘err111’, err) } } // 模拟接口返回数据 private httpBaskData = (): Promise<string[]> => { return new Promise((res, rej) => { setTimeout(() => { res([ ‘https://hwkjoss-kfx-biz-dev.oss-cn-hangzhou.aliyuncs.com/6395399560128654336.jpg’, ‘https://hwkjoss-kfx-biz-dev.oss-cn-hangzhou.aliyuncs.com/6395399560128654336.jpg’ ]) }, 1000) }) }

build() { Column() { Text(‘this.HospitalPropaganda的数据是：-----’) ForEach(this.HospitalPropaganda, (item: string) => { Text(item) }) Text(‘Swiper：-----’) if (this.HospitalPropaganda.length > 0) { Swiper(this.swiperController) { ForEach(this.HospitalPropaganda, (item: string) => { Image(item) .width(‘100%’).height(‘100%’).objectFit(ImageFit.Fill) }) } .width(‘100%’) .height(100) .cachedCount(2) .index(1) .autoPlay(true) .interval(4000) .indicator(true) .loop(true) .duration(1000) .itemSpace(0) .curve(Curve.Linear) } } .width(‘100%’) .height(‘100%’) .backgroundColor(’#F7F7F7’) } }

运行以上代码 预览器卡死；模拟器直接闪退；真机没有试过

已经反馈给官方：

解决办法：

在Swiper最外层加一个if判断


更多关于HarmonyOS 鸿蒙Next Swiper 数据为空导致页面崩溃的解决办法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next Swiper 数据为空导致页面崩溃的解决办法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Swiper组件的数据为空可能导致页面崩溃。解决该问题的方法如下：

  1. 数据校验：在使用Swiper组件前，确保数据源不为空。可以通过条件判断来避免空数据传递。

  2. 空状态处理：在Swiper组件中添加空状态处理逻辑，例如显示占位符或提示信息，防止因数据为空导致的异常。

  3. 默认值设置：为Swiper组件的数据源设置默认值，确保即使数据为空，组件也能正常渲染。

  4. 异常捕获：在Swiper组件的使用过程中，添加异常捕获机制，防止因数据问题导致的崩溃。

  5. 组件生命周期管理：在组件的生命周期方法中，确保数据加载完成后再进行渲染，避免空数据导致的异常。

通过以上方法，可以有效避免Swiper组件因数据为空导致的页面崩溃问题。

回到顶部