【# 鸿蒙中轮播图Swiper导致预览器/模拟器崩溃】

鸿蒙中轮播图Swiper导致预览器/模拟器崩溃

背景

从服务器获取轮播图数据，在Swiper中遍历并渲染时，预览器卡死，无报错

原因

使用aboutToAppear()从接口请求数据，Swiper处理数据时，数据还为空

解决办法

1、加一个if判断

if 从服务器获取的数据存在时，遍历渲染数据，否则可以渲染一个loading图片

          // 轮播
            if (this.swiperData.length){
              Swiper(this.swiperController) {
                ForEach(this.swiperData,(item:getSwiperResItemType)=>{
                  Image(item.img).width('100%')
                })
              }.loop(true).autoPlay(true)
            }else {
             Swiper(this.swiperController) {
                Image($rawfile('swiper/banner1.png'))
                Image($rawfile('swiper/banner2.png'))
              }.loop(true).autoPlay(true)

            }

2、mock数据，数据中放loading图片

在接受服务器数据的变量中放mock数据，可以是loading gif图片，

但从服务器获取到数据时，服务器数据会覆盖mock数据，

@State swiperData:getSwiperResItemType[] = [
  // img1,
  // img2
  {
    swiper_id: 0,
    img: 'https://ts1.cn.mm.bing.net/th/id/R-C.764319db0b103f9edcac08842b453651?rik=nOM%2f%2bYrpvFyNWg&riu=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f016ea057314efc0000002bf08c5256.gif&ehk=EI0ZnD397cFSVpHTK4URJJfxM0xjDprc5GCTMRvFaxs%3d&risl=&pid=ImgRaw&r=0',
    url: '',
    created_at: '',
    updated_at: ''
  },
  {
    swiper_id: 0,
    img: 'https://ts1.cn.mm.bing.net/th/id/R-C.764319db0b103f9edcac08842b453651?rik=nOM%2f%2bYrpvFyNWg&riu=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f016ea057314efc0000002bf08c5256.gif&ehk=EI0ZnD397cFSVpHTK4URJJfxM0xjDprc5GCTMRvFaxs%3d&risl=&pid=ImgRaw&r=0',
    url: '',
    created_at: '',
    updated_at: ''
  },
]

  // 获取轮播图
  async getSwiperHandler(){
    const {state,list} = await getSwiperApi(this.tableData)
    if (state == 200) {
      this.swiperData = list
      console.log(JSON.stringify(this.swiperData))
    }
  }