鸿蒙arkts加载组件图片旋转示例

最新推荐文章于 2025-03-10 15:15:21 发布

原创最新推荐文章于 2025-03-10 15:15:21 发布 · 706 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙

/**
 * 通用loading
 * 使用
 *
 import LoadingDialog from '../component/LoadingDialog';

 LoadingDialog: CustomDialogController = new CustomDialogController({
 builder: LoadingDialog({
 loadingTips: '加载中...'
 }),
 offset: { dx: 0, dy: -25 } ,
 customStyle:true,
 autoCancel:false
 })
 loadingDialogDisappear() {
 this.LoadingDialog = null // 将dialogController置空
 }
 //this.LoadingDialog.close()//关闭组件
 //this.LoadingDialog.open();//情况组件
 */

@CustomDialog
export default struct LoadingDialog {
  @Prop loadingTips: string
  @State rotateAngle: number=0 
  //弹窗控制器
  controller: CustomDialogController

  aboutToAppear() {
      setTimeout(()=>{
        this.rotateAngle =360;
      },500)
  }

  build() {
      Column() {
        Image($r('app.media.common_loading'))//存放在media文件夹下的图标
          .height('50')
          .width("50")
          .rotate({angle: this.rotateAngle })
          .animation({
            duration: 500,
            tempo:1,
            delay:0,
            playMode:PlayMode.Normal,
            iterations: -1,
            curve: Curve.Friction
          })
        Text(this.loadingTips )
          .fontSize('15vp')
          .margin('10vp')
      }
      .justifyContent(FlexAlign.Center)
      .height('500')
      .width("150vp")
      .border({ radius: '5vp' })

  }
}