信息设计网站,网站导航图怎么做,网站商城系统,北仑网站建设29gz创建一个空项目
先创建一个新的项目选择第一个#xff0c;然后点击finish
接下来为项目写一个名字#xff0c;然后点击finish。 把index页面的代码改成下面代码块的代码#xff0c;就能产生下面的效果
Entry
Component
struct Index {build() {Column(){Blank()Column(){…创建一个空项目
先创建一个新的项目选择第一个然后点击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.ArkUIEntry
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.ArkUIEntry
Component
struct LaunchPage {State index: number 0State 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
