【中工开发者】鸿蒙商城实战项目(启动页和引导页)

news/2024/12/13 16:24:15/

创建一个空项目

先创建一个新的项目选择第一个,然后点击finish

接下来为项目写一个名字,然后点击finish。

把index页面的代码改成下面代码块的代码,就能产生下面的效果

@Entry
@Component
struct Index {build() {Column(){Blank()Column(){}.height('100%').width('100%').linearGradient({colors: [['#FF8469',0],[ '#FC4355',1] ]})}}
}

          Text('探索').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)Text('探购物乐趣').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)

import { router } from '@kit.ArkUI'@Entry
@Component
struct Index {@State opacityValue: number = 0.3;onPageShow(){this.opacityValue = 1;}build() {Column(){Blank()Column(){Text('探索').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)Text('探购物乐趣').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Start).opacity(this.opacityValue).animation({duration:  1500,iterations:3,onFinish:()=>{router.replaceUrl({url: 'pages/LaunchPage'})}}).height('100%').width('100%').linearGradient({colors: [['#FF8469',0],[ '#FC4355',1] ]})}}
}
启动页

index页面代码如下

import router from '@ohos.router';
@Entry
@Component
struct Index {@State opacityValue: number = 0.3;
onPageShow(){this.opacityValue = 1;
}build() {Column(){Blank()Column(){Text('探索').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)Text('探购物乐趣').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Start).opacity(this.opacityValue).animation({duration:  1500,iterations:3,onFinish:()=>{router.replaceUrl({url: 'pages/LaunchPage'})}})Blank()Blank()Image($r('app.media.logo')).width(100)}.height('100%').width('100%').linearGradient({colors: [['#FF8469',0],[ '#FC4355',1] ]})}
}

export default  interface BannerModel{id:numbertitle:stringimage:Resourcesubtitle:string
}

LaunchModels页面代码

引导页

LaunchPage页面代码

import BannerModel from '../models/BannerModel'
import { router } from '@kit.ArkUI'@Entry
@Component
struct LaunchPage {@State index: number = 0@State items: BannerModel[] =[{id: 0,title: '电脑专区',image: $r('app.media.diannao'),subtitle: '探购物乐趣'},  {id: 1,title: '专区手机',image: $r('app.media.shouji'),subtitle: '探购物乐趣'},  {id: 2,title: '耳机专区',image: $r('app.media.erji'),subtitle: '探购物乐趣'}]build() {
Column(){Tabs() {ForEach(this.items, (item: BannerModel, index: number) => {TabContent() {Column() {Text(item.title).fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold).fontWeight(FontWeight.Bold)Text(item.subtitle).fontColor(Color.White)//.fontSize(36).fontWeight(FontWeight.Bold)Blank()Image(item.image).width(200).objectFit(ImageFit.Contain).interpolation(ImageInterpolation.High)//.height(100)Row({space:10}){ForEach([1,2,3], (item: number, index: number)=>{Rect({width: 40, height: 40}).fill(this.index == index ? Color.White : Color.Gray)})}.margin({top: 200})if (this.index == this.items.length-1) {Button("立即体验").width('100%').height(60).fontSize(36).borderWidth(2).borderColor(Color.White).backgroundColor(Color.Transparent).margin({top: 30}).onClick(()=>{router.replaceUrl({url:"pages/HomePage"})})}}.width('100%').height('100%').padding({top: 30,left: 30,right: 30})}.width('100%').height('100%')})}.width('100%').height('100%').onChange((index: number) => {this.index = index})
}.width('100%').height('100%').linearGradient({colors: [['#FF8469',0],[ '#FC4355',1]]}).height('100%').width('100%')}
}

图片资源

目录

创建一个空项目

启动页

引导页

图片资源


使用image要传入照片的路径,记得在resource文件夹里面粘贴相应的图片

演示视频如下

QQ2024126-195722


http://www.ppmy.cn/news/1554799.html

相关文章

小程序自定义tab-bar,踩坑记录

从官方下载代码 https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 1、把custom-tab-bar 文件放置 pages同级 修改下 custom-tab-bar 下的 JS文件 Component({data: {selected: 0,color: "#7A7E83",selectedColor: "#3…

muduo网络库:各类功能

一、 二、各类含义 1、EventLoop类 在Muduo网络库中,EventLoop类是核心组件之一。它的作用是**提供事件循环机制, **负责管理和调度各种事件(如I/O事件、定时器事件),确保这些事件能够及时被处理,从而实现…

SSM虾米音乐项目3-后台流派模块的增删改

整体查询到的页面 <div class"widget-header"><i class"icon-list-ol"></i><h3>搜索条件</h3></div><div class"widget-content"><fieldset id"find"><div class"control-gr…

Linux 高级命令大全

Linux 高级命令大全 系统管理 查看所有已加载的服务 systemctl list-units --typeservice 禁用服务的开机自启 systemctl disable service_name 动态启用 IP 转发 sysctl -w net.ipv4.ip_forward1 立即关闭系统 shutdown -h now 重启系统 reboot 查看系统运行时间和负载 …

LightRAG测试BUG

错误一&#xff1a; LightRAG无法回答错误&#xff1a; INFO:lightrag:kw_prompt result:{{"high_level_keywords": ["xxx", "xxx"],"low_level_keywords": ["xxx", "xxx", "xxx"] }} JSON parsing e…

24.DDD与敏捷开发

学习视频来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 DDD与敏捷开发的关系敏捷宣言DDD与敏捷开发相互助力1. 都强调人与人的协作2. 都强调迭代 DDD与敏捷开发的关系 DDD与敏捷开发不…

访问者模式的理解和实践

在软件开发过程中&#xff0c;设计模式为我们提供了解决常见问题的最佳实践。访问者模式&#xff08;Visitor Pattern&#xff09;是行为设计模式之一&#xff0c;它将数据操作与数据结构分离&#xff0c;使得在不修改数据结构的前提下&#xff0c;能够定义作用于这些元素的新的…

MySQL生产环境备份脚本

全量备份脚本&#xff0c;其中BakDir&#xff0c;ZlbakDir&#xff0c;LogFile需要自己创建 #!/bin/bash export LANGen_US.UTF-8# 指定备份目录 BakDir/root/beifen/data/mysqlbak/data/allbak # 指定增量备份目录 ZlbakDir/root/beifen/data/mysqlbak/data/zlbak # 备份日志…