创建一个空项目
先创建一个新的项目选择第一个,然后点击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