【HarmonyOS】骨架屏(数据请求回来之前使用组件生成骨架屏,数据回来以后【骨架屏】消失)不会让页面白屏显示空

#骨架屏作用用途

骨架屏用途就是防止用户焦虑（为了迷惑用户）

#效果图

#思路：

#步骤：

1.首先是封装一个骨架 （所使用的思路就是利用 linearGradient + translate + animation + onAppear 实现骨架的闪光效果）

2.在其他页面进行调用（数据请求回来之前使用：思路就是Foreach+封装生成的骨架屏,数据回来以后骨架屏消失）

#单个骨架组件封装（代码如下）

封装最好的目的是为了在任何页面都可以调用！

##IvSkeleton.ets

@Entry
@Component
export struct IvSkeleton {
  @State translageX: string = '-100%' // 定义闪电效果的位置
  widthValue: number = 100
  heightValue: number = 28

  build() {
    Stack() {
      // 背景效果
      Text()
        .width(this.widthValue)
        .height(this.heightValue)
        .backgroundColor('rgba(0,0,0,0.5)')

      // 闪电效果
      Text()
        .width(this.widthValue)
        .height(this.heightValue)
        .translate({ x: this.translageX })  // 控制闪电位置
        .onAppear(() => {
          // 当组件加载后，触发此函数，将translate的x轴位置改变到100%
          this.translageX = '100%'
        })
        .animation({
          duration: 1500, // 1.5秒内完成闪电动画
          iterations: -1  // 无限闪动动画
        })
        .linearGradient({ // 闪电效果
          angle: 90,
          colors: [
            ['rgba(255,255,255,0)', 0],
            ['rgba(255,255,255,1)', 0.5],
            ['rgba(255,255,255,0)', 1]
          ]
        })

    }
  }
}

##在其

他页面调用：

##HomeCategoryComp.ets

import { IvSkeleton } from '../../components/IvSkeleton'

@Component
export struct HomeCategoryComp {

build() {
  if(this.questionTypeList.length==0){
    ForEach(Array.from({length:10}),()=>{
      Row({space:10}){
        IvSkeleton({widthValue:50,heightValue:50})
        IvSkeleton({widthValue:200,heightValue:50})
      }
      .padding({top:10})
    })
  }else{
//返回的数据
        }
       }
  }
}