HarmonyOS 鸿蒙Next Swiper组件配合异步操作预览崩溃（无法预览）

HarmonyOS 鸿蒙Next Swiper组件配合异步操作预览崩溃（无法预览）

import { CarouseModel, CarouseItem } from '../model/CarouseModel'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @StorageProp('token') token: string = ''
  @State courseList: CarouseItem[] = []
  private swiperController: SwiperController = new SwiperController()

  aboutToAppear() {
    this.getCarouseList()
  }

  async getCarouseList() {
    try {
      let course = new CarouseModel()
      this.courseList = await course.getCarouseList()
      console.log(JSON.stringify(this.courseList))
    } catch (err) {
      console.log(err)
    }
  }

  build() {
    Row() {
      Swiper(this.swiperController) {
        ForEach(this.courseList, (item: CarouseItem) => {
          Image(item.url)
        }, item => item.id)
      }
      .loop(true)
      .autoPlay(true)
      .indicator(true)
      List() {
        ForEach(this.courseList, (item: CarouseItem) => {
          ListItem() {
            Image(item.url)
          }
        }, item => item.id)
      }
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.token)
          .fontColor('red')
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next Swiper组件配合异步操作预览崩溃（无法预览）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

同样遇到这个问题，在 swiper 外边增加 if 条件判断，当异步加载的数据有值时再渲染 swiper，可正常预览。

更多关于HarmonyOS 鸿蒙Next Swiper组件配合异步操作预览崩溃（无法预览）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


很赞，可以解决。

用懒加载的话怎么解决崩溃情况。

在swiper外边增加if条件判断 解决。刚也遇到这个问题

项目名称

  • 项目状态：进行中
  • 开始日期：2023-03-01
  • 结束日期：2023-06-01

项目描述

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl vel blandit lacinia, velit ex malesuada nisi, non efficitur lectus velit non nibh. Sed ut purus ac purus bibendum tincidunt.

团队成员

  • John Doe
  • Jane Smith
  • Sam Johnson

相关文件

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

swiper里面数据是网络加载的json转换的bean ，配置好@State属性，当数据来了解析赋值了bean了，不就显示了嘛

如果(this.focusList.length > 0) { this.SwiperWidget() }

原来如此，一语惊醒梦中人。我是用的IDataSource懒加载，由于IDataSource的this.swiperList.totalCount()更新数据后没法实时更新UI，所以导致无法渲染。需要再单独声明一个@state变量作为标签，数据动态更新的同时再修改标签以触发重新渲染，就可以正常渲染了。

我的更离谱，使用Swiper但不放任何内容，预览崩溃，顺带我电脑也奔溃

  1. 测试下来没有问题，你可以检查一下你异步接口实现。
  2. 你的Build Row布局3个子布局中有Swiper，也没有指定宽度，所以另外两个视图永远不会展示
  3. 如果仅仅是预览崩溃，为了快速调试，使用本地图片，临时替代一下

参见你的样例代码

class CarouseItem {
  public url: string

  constructor(m: string) {
    this.url = m
  }
}

class CarouseModel{
   private courseList: CarouseItem[] = []

   public async getCarouseList(){
      this.courseList.push(new CarouseItem('https://gd-hbimg.huaban.com/c29b97643dd31ad3dd219b166ce324f261f560b4f24c6-MvflIg_fw480webp'))
      this.courseList.push(new CarouseItem('https://gd-hbimg.huaban.com/ac838dd3745bd9624f69265ff88c935a13bed263b3076-elB70h_fw480webp'))
      this.courseList.push(new CarouseItem('https://gd-hbimg.huaban.com/c531159bfeb72ad69f8f2e32ebc11d69534e6972955e2-YVb8Tc_fw480webp'))
      return this.courseList
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @StorageProp('token') token: string = ''
  @State courseList: CarouseItem[] = []
  private swiperController: SwiperController = new SwiperController()

  aboutToAppear() {
    this.getCarouseList()
  }

  async getCarouseList() {
    try {
      let course = new CarouseModel()
      this.courseList = await course.getCarouseList()
      console.log(JSON.stringify(this.courseList))
    } catch (err) {
      console.log(err)
    }
  }

  build() {
    Row() {

      Swiper(this.swiperController) {
        ForEach(this.courseList, (item: CarouseItem) => {
          Image(item.url)
        }, item => item.id)
      }
      .loop(true)
      .autoPlay(true)
      .indicator(true)

      List() {
        ForEach(this.courseList, (item: CarouseItem) => {
          ListItem() {
            Image(item.url)
          }
        }, item => item.id)
      }

      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.token)
          .fontColor('red')
      }
      .width('100%')

    }
    .height('100%')
  }
}

List() { ForEach(this.courseList, (item: CarouseItem) => { ListItem() { Image(item.url) } }, item => item.id) }

使用 List 容器组件没有问题，只要使用Swiper就预览崩溃

在HarmonyOS鸿蒙Next中，Swiper组件用于实现轮播图功能。如果在使用Swiper组件时配合异步操作（如网络请求、数据加载等）导致预览崩溃或无法预览，可能是由于以下原因：

  1. 数据未及时更新：异步操作未完成时，Swiper组件可能尝试渲染空数据或未定义的数据，导致崩溃。确保在数据加载完成后更新组件状态。

  2. 状态管理问题：异步操作可能在组件未完全初始化时触发状态更新，导致组件无法正确处理数据。确保在组件生命周期中正确处理异步操作。

  3. UI线程阻塞：异步操作可能阻塞UI线程，导致Swiper组件无法正常渲染。使用Promise或async/await确保异步操作不会阻塞主线程。

  4. 组件生命周期：Swiper组件可能在异步操作完成前被卸载或重新渲染，导致无法正确处理数据。确保在组件卸载前取消或完成异步操作。

  5. 数据格式问题：异步操作返回的数据格式可能与Swiper组件预期的不一致，导致渲染失败。确保数据格式正确，并在更新前进行校验。

检查以上问题，确保Swiper组件在异步操作完成时能够正确渲染数据。

回到顶部