HarmonyOS引导页登陆页以及tabbar的代码说明2

效果




修改的页具有下拉刷新功能,实现了分页

引导页代码:

@Component

struct SkipButton 这里是自定义模块。onPageShow是页面显示后则进入一个定时任务。到3秒后则进行跳转到'pages/LoginPage',当页面onPageHide时,则删除自动任务。这其本是上javascript的语法。

typescript 复制代码
import router from '@ohos.router';
@Entry
@Component
struct SplashScreenPage {
  @State pageShowTime: number = 0;
  @State intervalID: number = 0;
  build() {
    Column() {
      Stack({ alignContent: Alignment.TopStart }) {
        Image($r('app.media.splash'))
          .width('100%')
          .height('100%')
        AdvertiseIcon()
        SkipButton({ secondsCount: (2 - this.pageShowTime) })
      }
      .layoutWeight(1)
      .width('100%')

    }
    .alignItems(HorizontalAlign.Start)
    .width('100%')
    .height('100%')
  }

  /**
   * When the SplashScreenPage is displayed, switch to the next page after 3 seconds.
   */
  onPageShow() {
    this.intervalID = setInterval(() => {
      this.pageShowTime += 1;
      if (this.pageShowTime > 3) {
        router.pushUrl({
          url: 'pages/LoginPage'
        });
      }
    }, 1000);
  }

  /**
   * When the SplashScreenPage is hide, clear interval.
   */
  onPageHide() {
    clearInterval(this.intervalID);
  }
}

@Component
struct SkipButton {
  @Prop secondsCount: number;
  build() {
    Flex({
      direction: FlexDirection.Row,
      justifyContent: FlexAlign.End
    }) {
      Text("跳过 "+(this.secondsCount>0?this.secondsCount.toString():'0'))
        .backgroundColor(Color.White)
        .borderRadius(14)
        .fontColor(Color.Black)
        .width('72vp')
        .height("28vp")
        .fontSize('15fp')
        .margin({
          right:'16vp',
          top: '12vp'
        })
        .textAlign(TextAlign.Center)
        .border({ width:1 })
        .borderColor(Color.Black)
        .onClick(() => {
          router.replaceUrl({
            url: 'pages/LoginPage'
          });
        })
    }
  }
}

@Component
struct AdvertiseIcon {
  build() {
    Flex({
      direction: FlexDirection.Column,
      justifyContent: FlexAlign.End
    }) {
      Image($r('app.media.ic_advertise'))
        .objectFit(ImageFit.Contain)
        .width("28vp")
        .height("16vp")
    }
    .margin("16vp")
  }
}
相关推荐
HMS Core2 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡2 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
伍哥的传说2 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
funnycoffee1233 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
制造数字化方案研究院3 小时前
59页|PPT|华为集成服务交付ISD业务变革总体方案:业务规则、流程、IT、组织及度量“四位一体”的管理体系
运维·华为
博睿谷IT99_3 小时前
华为物联网认证:开启万物互联的钥匙
物联网·华为·华为认证·职业规划
遇到困难睡大觉哈哈16 小时前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
幽蓝计划19 小时前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos
伍哥的传说19 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
Georgewu21 小时前
【HarmonyOS】应用开发拖拽功能详解
harmonyos