添加loading 动画
fix web跳转
This commit is contained in:
parent
e55bf2535c
commit
172581dff7
@ -6,27 +6,35 @@ import { curves } from '@kit.ArkUI';
|
||||
@Component
|
||||
export struct LoadingPage {
|
||||
@State animate: boolean = false;
|
||||
// 第一步: 声明相关状态变量
|
||||
@State rotateValue: number = 0; // 组件一旋转角度
|
||||
@State rotateValue: number = 0;
|
||||
|
||||
@Prop @Watch('onVisibleChanged')visible: boolean = false;
|
||||
onVisibleChanged() {
|
||||
if (this.visible) {
|
||||
this.animate = true;
|
||||
// 组件一的rotate属性发生变化,所以会给组件一添加rotate旋转动画
|
||||
this.rotateValue = this.animate ? 360 : 0;
|
||||
}else {
|
||||
this.animate = false;
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
|
||||
Image(CommonRes.getImage('ic_loading'))
|
||||
.rotate({ angle: this.rotateValue })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.fillColor('#2196F3')
|
||||
.width(32).height(32).fillColor('#2196F3')
|
||||
.animation({
|
||||
curve: curves.initCurve(Curve.Linear),
|
||||
playMode: PlayMode.Normal,
|
||||
iterations: -1,
|
||||
})
|
||||
.onAppear(() => {
|
||||
this.animate = !this.animate;
|
||||
// 组件一的rotate属性发生变化,所以会给组件一添加rotate旋转动画
|
||||
this.rotateValue = this.animate ? 360 : 0;
|
||||
})
|
||||
duration: 1000
|
||||
}).visibility(this.visible ? Visibility.Visible : Visibility.None)
|
||||
|
||||
Button('change').width('60%').height(36).onClick(() =>{
|
||||
this.visible = !this.visible;
|
||||
}).margin({top: 24})
|
||||
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
|
||||
}
|
||||
}
|
@ -22,6 +22,8 @@ export struct SchemePage {
|
||||
openScheme() {
|
||||
let context = getContext(this) as common.UIAbilityContext;
|
||||
let wantInfo: Want = {
|
||||
action: 'ohos.want.action.viewData',
|
||||
entities: ['entity.system.browsable'],
|
||||
uri: 'https://devwiki.net'
|
||||
}
|
||||
context.startAbility(wantInfo);
|
||||
|
Loading…
Reference in New Issue
Block a user