HarmonyOS 骨架屏组件封装

封装一个骨架屏组件，纯干货 一句废话没有

直接引用组件就可以使用，后面上代码[嘿嘿]

1. 首先这个组件基于四个非常常见的功能实现

onAppear(()=>{})    // 组件挂载显示后触发此回调 
animation({             // 动画效果
      duration:1500,  // 动画显示时常
      iterations:-1      // 设置-1表示动画无限循环   
})  
linearGradient({      // 颜色渐变  设置为 透明|白|透明
      color：[ ]
})
translate({ x: '-100%'})         // 平移的距离 默认是 -100%(不显示)
// 等 触发调用时 显示 100%铺满，并设置 动画效果

2. 外部调用与参数传递

IvSkeleton ()   // 无参数默认大小
IvSkeleton ({ widthValue:  88,heightValue: 8  })  // 传参 88/8

3. 可以根据 想要显示 骨架屏的位置 渲染数据的数组长度来决定什么时候显示/关闭

    当然只是其中一种方法

骨架屏封装组件 导入直接使用

@Component
export struct IvSkeleton {
// 骨架屏内定义一个默认的宽度高度 通过外部传入参数  可以对其进行修改
  widthValue: number | string = 100
  heightValue: number | string = 20
  @State translateValue: string = "-100%"

  build() {
    Stack() {
      // 底部背景text 为灰色 
      Text()
        .backgroundColor(Color.Gray)
        .height('100%')
        .width('100%')

      // 实现 闪动效果
      Text()
        .height('100%')
        .width('100%')
        .translate({ x: this.translateValue })
        .linearGradient({
          angle: 45,  //  角度
          colors: [  // 渐变颜色不多说了
            ['rgba(255,255,255,0)', 0],
            ['rgba(255,255,255,1)', 0.5],
            ['rgba(255,255,255,0)', 0]
          ]
        })
        // 设置动画效果 时常 / 次数
        .animation({duration:1500,iterations:-1})
        // 使用组件后触发
        .onAppear(()=>{
          this.translateValue = '100%'
        })

    }
    .height(this.heightValue)
    .width(this.widthValue)
  }
}