interface MenuClass {
icon: string;
title: string;
}
interface ProductClass {
icon: string;
title: string;
}
interface HomeNewClass {
image: string;
name: string;
price: number;
}
interface goodsClass {
originPrice: number;
retailPrice: number;
name: string;
goodsBrief: string;
icon: string;
tag: string;
}
interface UserStory {
image: string;
content: string;
}
interface Particle {
x: number;
y: number;
size: number;
opacity: number;
speedX: number;
speedY: number;
}
@Entry
@Component
export struct Home {
@State swiperList: ResourceStr[] = [$r('app.media.banner2'), $r('app.media.banner1')];
@State menuList: MenuClass[] = [
{ icon: 'menu1', title: '今日爆款' },
{ icon: 'menu2', title: '好物分享' },
{ icon: 'menu3', title: '推荐购买' },
{ icon: 'menu4', title: '购物心得' },
{ icon: 'menu5', title: '直播专区' },
{ icon: 'menu6', title: '签到中心' },
{ icon: 'menu7', title: '值得购买' },
{ icon: 'menu8', title: '每日优惠' },
{ icon: 'menu9', title: '充值中心' },
{ icon: 'menu10', title: '我的客服' }
];
@State productList: ProductClass[] = [
{ icon: 'product1', title: '直播' },
{ icon: 'product2', title: '推荐' },
{ icon: 'product3', title: '补贴' },
{ icon: 'product4', title: '推荐' },
];
@State homeNewList: HomeNewClass[] = [
{
image: 'product11',
name: '行李牌',
price: 12.80
},
{
image: 'product12',
name: '后陡门58号毛毯',
price: 68.80
},
{
image: 'product13',
name: '限定帆布包',
price: 77.00
},
{
image: 'product14',
name: '红包桶背背',
price: 29.80
},
];
@State GoodsList: goodsClass[] = [
{
originPrice:1188888.00,
retailPrice: 12.80,
name: '行李牌',
goodsBrief: '[十个勤天] 少年同款官方正品售出 2.0夜光版',
icon: 'top1',
tag: 'TOP1'
},
{
retailPrice: 28.8,
originPrice: 1188888.00,
name: '蛇来运转日历',
goodsBrief: '[十个勤天]有了日历，再也不怕记不住，爸妈放心',
icon: 'top2',
tag: 'TOP2'
},
{
retailPrice: 49.8,
originPrice: 1188888.00,
name: '后陡门牌手账',
goodsBrief: '轻松看书、社交、办公、舒适放松',
icon: 'top3',
tag: 'TOP3'
},
{
retailPrice: 39.80,
originPrice: 1188888.00,
name: '发财小手',
goodsBrief: '[十个勤天]麻辣猪蹄 酱香猪蹄 熟肉制品',
icon: 'top4',
tag: 'TOP4'
},
{
retailPrice: 12.8,
originPrice: 1188888.00,
name: '烧椒酱',
goodsBrief: '[十个勤天]泡面的好搭档 三子同款',
icon: 'top5',
tag: 'TOP5'
}
];
// 新增状态
@State isRefreshing: boolean = false;
@State isLoadingMore: boolean = false;
@State pageNum: number = 1;
@State hasMoreData: boolean = true;
// 动态背景粒子
@State particles: Particle[] = [];
@State particleCount: number = 20;
// 节日/节气装饰
@State festivalDecoration: ResourceStr | null = null;
// 数据可视化
@State userCount: number = 128000;
@State satisfactionRate: number = 96;
@State productCount: number = 5800;
// 用户故事
@State userStories: UserStory[] = [
{
image: 'user1',
content: '带着行李牌去旅行，轻便又实用，朋友都问我要链接！'
},
{
image: 'user2',
content: '毛毯质量超好，冬天盖着特别暖和，推荐给大家！'
},
{
image: 'user3',
content: '烧椒酱拌面太好吃了，已经回购三次，下饭神器！'
}
];
// 品牌标语
@State slogans: string[] = [
"让好物温暖每个日常",
"用心选择，品质生活",
"小物件，大幸福"
];
@State currentSloganIndex: number = 0;
aboutToAppear() {
this.initParticles();
this.startSloganAnimation();
}
// 初始化动态背景粒子
initParticles() {
for (let i = 0; i < this.particleCount; i++) {
this.particles.push({
x: Math.random() * 100,
y: Math.random() * 100,
size: Math.random() * 3 + 1,
opacity: Math.random() * 0.5 + 0.3,
speedX: (Math.random() - 0.5) * 0.5,
speedY: Math.random() * 0.5 + 0.1
});
}
// 粒子动画
setInterval(() => {
for (let i = 0; i < this.particleCount; i++) {
const particle = this.particles[i];
particle.x += particle.speedX;
particle.y += particle.speedY;
if (particle.x > 100) particle.x = 0;
if (particle.x < 0) particle.x = 100;
if (particle.y > 100) particle.y = 0;
// 浅拷贝更新状态
this.particles = [...this.particles];
}
}, 30);
}
// 品牌标语动画
startSloganAnimation() {
setInterval(() => {
this.currentSloganIndex = (this.currentSloganIndex + 1) % this.slogans.length;
}, 3000);
}
@Builder
productBuilder(item: ProductClass) {
Stack({
alignContent: Alignment.TopStart
}) {
Image($r(`app.media.${item.icon}`)).width('49%')
Text(item.title)
.fontColor('#fff')
.backgroundColor(Color.Red)
.fontWeight(600)
.padding({
left: 5,
top: 8,
right: 5,
bottom: 8
})
.borderRadius(5)
.margin(5)
}
.margin({ bottom: 5 })
}
@Builder
sloganAnimation() {
Stack() {
Text(this.slogans[this.currentSloganIndex])
.fontSize(22)
.fontWeight(FontWeight.Bold)
.fontColor('#333')
.backgroundColor('#f9f9f9')
.width('100%')
.height(60)
.textAlign(TextAlign.Center)
.borderRadius(10)
.opacity(1)
// .animation({
// type: AnimationType.Opacity,
// duration: 1000,
// curve: Curve.Linear
// })
}
.width('100%')
.height(60)
}
@Builder
dynamicBackground() {
Stack() {
ForEach(this.particles, (particle: Particle, index: number) => {
Circle()
.fill('#f60')
.width(particle.size)
.height(particle.size)
.opacity(particle.opacity)
.position({
x: particle.x,
y: particle.y
})
})
}
.width('100%')
.height('100%')
.position({ x: 0, y: 0 })
.zIndex(-1)
.opacity(0.3)
}
build() {
Stack() {
// 动态背景
this.dynamicBackground()
// 主内容
Scroll() {
Column({ space: 10 }) {
// 搜索框
Search({ placeholder: '请输入关键词' })
.backgroundColor('#f5f5f5')
.margin({ top: 10, bottom: 5 })
// 节日装饰
if (this.festivalDecoration) {
Image(this.festivalDecoration)
.width('100%')
.height(50)
.objectFit(ImageFit.Contain)
.margin({ bottom: 5 })
}
// 轮播图
Swiper() {
ForEach(this.swiperList, (item: ResourceStr) => {
Image(item)
})
}
.width('100%')
.height(120)
.autoPlay(true)
.interval(2000)
// 功能按钮区
Grid() {
ForEach(this.menuList, (item: MenuClass) => {
GridItem() {
Column({ space: 8 }) {
Image($r(`app.media.${item.icon}`)).width(45)
Text(item.title).fontSize(14)
}
}
.border({ width: 1, color: '#eee' })
})
}
.width('100%')
.height(180)
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.columnsGap(5)
.rowsGap(5)
// 产品展示区
Flex({
wrap: FlexWrap.Wrap,
justifyContent: FlexAlign.SpaceBetween
}) {
ForEach(this.productList, (item: ProductClass) => {
this.productBuilder(item)
})
}
.width('100%')
// 每周上新
Divider().border({ width: 3, color: '#999' }).width('40%').borderRadius(10)
Text('每周上新').fontSize(30).fontWeight(700).margin({ top: 10, bottom: 10 })
Flex({
wrap: FlexWrap.Wrap,
justifyContent: FlexAlign.SpaceBetween
}) {
ForEach(this.homeNewList, (item: HomeNewClass) => {
Column({ space: 8 }) {
Image($r(`app.media.${item.image}`)).width('49%')
Text(item.name)
Text() {
Span('￥').fontColor('#f60')
Span(item.price.toString())
}
}
})
}
// 人气推荐
Text('人气推荐').fontSize(30).fontWeight(700).margin({ top: 10, bottom: 10 })
List({ space: 10 }) {
ForEach(this.GoodsList, (item: goodsClass) => {
ListItem() {
Row() {
Stack({ alignContent: Alignment.TopStart }) {
Image($r(`app.media.${item.icon}`)).width(100).borderRadius(8)
Text(item.tag)
.fontColor('#ffffffff')
.backgroundColor('#f60')
.padding({ left: 5, right: 5 })
.borderRadius({ topRight: 8, bottomRight: 8 })
.margin({ top: 10 })
}
Column({ space: 10 }) {
Text(item.name).fontWeight(FontWeight.Bold).fontSize(18)
Text(item.goodsBrief).fontColor('#999')
Text() {
Span('￥').fontColor('#f60')
Span(item.retailPrice.toString()).fontWeight(FontWeight.Bold).fontSize(18)
Span('￥'+item.originPrice.toString()).fontColor('#999').fontSize(14)
.decoration({ type: TextDecorationType.LineThrough, color: '#ff323232' })
}
}
.layoutWeight(1)
.alignItems(HorizontalAlign.Start)
}
}
})
if (this.isLoadingMore) {
ListItem() {
Row() {
LoadingProgress()
Text('加载中...').fontSize(14).margin({ left: 10 })
}
.justifyContent(FlexAlign.Center)
.height(50)
}
} else if (!this.hasMoreData) {
ListItem() {
Text('没有更多数据了').fontSize(14).fontColor('#999')
.width('100%')
.textAlign(TextAlign.Center)
.height(50)
}
}
}
.onReachEnd(() => {
if (!this.isLoadingMore && this.hasMoreData) {
this.isLoadingMore = true;
setTimeout(() => {
this.isLoadingMore = false;
this.hasMoreData = false;
}, 1500);
}
})
// 品牌标语
this.sloganAnimation()
}
.width('100%')
.padding({ left: 10, right: 10 })
}
.scrollBar(BarState.Off)
.width('100%')
.height('100%')
}
.width('100%')
.height('100%')
}
}
// interface MenuClass {
// icon: string;
// title: string;
// }
//
// interface ProductClass {
// icon: string;
// title: string;
// }
// interface HomeNewClass {
// image: string;
// name: string;
// price: number;
// }
// interface goodsClass{
// originPrice:number
// retailPrice:number
// name:string
// goodsBrief:string
// icon:string
// tag:string
// }
// @Entry
// @Component
// export struct Home {
// swiperList: ResourceStr[] = [$r('app.media.banner2'), $r('app.media.banner1')];
// menuList: MenuClass[] = [
// { icon: 'menu1', title: '今日爆款' },
// { icon: 'menu2', title: '好物分享' },
// { icon: 'menu3', title: '推荐购买' },
// { icon: 'menu4', title: '购物心得' },
// { icon: 'menu5', title: '直播专区' },
// { icon: 'menu6', title: '签到中心' },
// { icon: 'menu7', title: '值得购买' },
// { icon: 'menu8', title: '每日优惠' },
// { icon: 'menu9', title: '充值中心' },
// { icon: 'menu10', title: '我的客服' }
// ];
// productList: ProductClass[] = [
// { icon: 'product1', title: '直播' },
// { icon: 'product2', title: '推荐' },
// { icon: 'product3', title: '补贴' },
// { icon: 'product4', title: '推荐' },
// ];
// homeNewList: HomeNewClass[] = [
// {
// image: 'product11',
// name: '行李牌', //卡套挂件 2.0夜光版
// price: 12.80
// },
// {
// image: 'product12',
// name: '后陡门58号毛毯', //春季版
// price: 68.80
// },
// {
// image: 'product13',
// name: '限定帆布包',
// price: 77.00
// },
// {
// image: 'product14',
// name: '红包桶背背',
// price: 29.80
// },
//
// ];
// GoodsList:goodsClass[] = [
// {
// originPrice:1188888.00,
// retailPrice: 12.80,
// name: '行李牌',
// goodsBrief: '[十个勤天] 少年同款官方正品售出 2.0夜光版',
// icon: 'top1',
// tag: 'TOP1'
// },
// {
// retailPrice: 28.8,
// originPrice: 1188888.00,
// name: '蛇来运转日历',
// goodsBrief: '[十个勤天]有了日历，再也不怕记不住，爸妈放心',
// icon: 'top2',
// tag: 'TOP2'
// },
// {
// retailPrice: 49.8,
// originPrice: 1188888.00,
// name: '后陡门牌手账',
// goodsBrief: '轻松看书、社交、办公、舒适放松',
// icon: 'top3',
// tag: 'TOP3'
// },
// {
// retailPrice: 39.80,
// originPrice: 1188888.00,
// name: '发财小手',
// goodsBrief: '[十个勤天]麻辣猪蹄 酱香猪蹄 熟肉制品',
// icon: 'top4',
// tag: 'TOP4'
// },
// {
// retailPrice: 12.8,
// originPrice: 1188888.00,
// name: '烧椒酱',
// goodsBrief: '[十个勤天]泡面的好搭档 三子同款',
// icon: 'top5',
// tag: 'TOP5'
// }
// ]
//
// @Builder
// productBuilder(item: ProductClass) {
// Stack({
// alignContent: Alignment.TopStart
// }) {
// Image($r(`app.media.${item.icon}`)).width('49%')
// Text(item.title)
// .fontColor('#fff')
// .backgroundColor(Color.Red)
// .fontWeight(600)
// .padding({
// left: 5,
// top: 8,
// right: 5,
// bottom: 8
// })
// .borderRadius(5)
// .margin(5)
// }
// // 下外边距
// .margin({ bottom: 5 })
// }
//
// build() {
// // Text('此处是首页页面').fontSize(30)
// Scroll() {
// // 只能包含一个子组件
// Column({ space: 10 }) {
// // -----------------1--搜索框---------------------
// Search({ placeholder: '请输入关键词' })
// // ----------------2--轮播图----------------------
// Swiper() {
// ForEach(this.swiperList, (item: ResourceStr) => {
// Image(item)
// })
// }
// // 设置轮播图尺寸，实现内容自动拉伸
// .width('100%')
// .height(120)
// // 开启自动播放
// .autoPlay(true)
// // 播放间隔
// .interval(2000)
//
// //-------------3--功能按钮区------------------------
// Grid() {
// ForEach(this.menuList, (item: MenuClass) => {
// GridItem() {
// // 能否优化？使用@Builder
// Column({ space: 8 }) {
// // 上图
// Image($r(`app.media.${item.icon}`)).width(50)
// //下文
// Text(item.title)
// }
// }
// .border({ width: 1, color: '#eee' })
// })
// }
// .width('100%')
// .height(180)
// // .backgroundColor('#ccc')
// .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
// // .rowsTemplate('1fr 1fr')
// .columnsGap(5)
// .rowsGap(5)
//
//
// //--------4-产品展示区----------------------
// Flex({
// wrap: FlexWrap.Wrap, //换行
// justifyContent: FlexAlign.SpaceBetween
//
// }) {
// // 子组件
//
// // 层叠布局
// ForEach(this.productList, (item: ProductClass) => {
// /* Stack({
// alignContent:Alignment.TopStart
// }){
// Image($r(`app.media.${item.icon}`)).width('49%')
// Text(item.title)
// .fontColor('#fff')
// .backgroundColor(Color.Red)
// .fontWeight(600)
// .padding({left:5,top:8,right:5,bottom:8})
// .borderRadius(5)
// .margin(5)
// }
// // 下外边距
// .margin({bottom:5})*/
// this.productBuilder(item)
// })
//
// /* Stack(){
// Image($r('app.media.product2')).width('49%')
// }
// Stack(){
// Image($r('app.media.product3')).width('49%')
// }
// Stack(){
// Image($r('app.media.product4')).width('49%')
// }*/
// }
// .width('100%')
//
//
//
// // ------------------5--每周上新------------------------------------
// // 分割线
// Divider().border({ width: 3, color: '#999' }).width('40%').borderRadius(10)
// Text('每周上新').fontSize(30).fontWeight(700).margin({ top: 10, bottom: 10 })
// Flex({
// wrap: FlexWrap.Wrap, //换行
// justifyContent: FlexAlign.SpaceBetween
//
// }) {
// ForEach(this.homeNewList, (item: HomeNewClass) => {
// Column({ space: 8 }) {
// Image($r(`app.media.${item.image}`)).width('49%')
// Text(item.name)
// Text() {
// Span('￥').fontColor('#f60')
// Span(item.price.toString())
// }
// }
// })
//
// }
// // interface goodsClass{
// // originPrice:number
// // retailPrice:number
// // name:string
// // goodsBrief:string
// // icon:string
// // tag:string
// // }
// // ------------------6--人气推荐------------------------------------
// Text('人气推荐').fontSize(30).fontWeight(700).margin({ top: 10, bottom: 10 })
// List({space:10}){
// ForEach(this.GoodsList, (item: goodsClass) => {
// ListItem(){
//
// Row(){
// Stack({alignContent:Alignment.TopStart}){
// Image($r(`app.media.${item.icon}`)).width(100).borderRadius(8)
// Text(item.tag)
// .fontColor('#ffffffff')
// .backgroundColor('#f60')
// .padding({left:5,right:5})
// .borderRadius({topRight:8,bottomRight:8})
// .margin({top:10})
// }
// Column({space:10}){
// Text(item.name).fontWeight(FontWeight.Bold).fontSize(18)
// Text(item.goodsBrief).fontColor('#999')
// Text(){
// Span('￥').fontColor('#f60')
// Span(item.retailPrice.toString()).fontWeight(FontWeight.Bold).fontSize(18)
// // Span('￥').fontColor('#999').fontSize(12).decoration({type:TextDecorationType.LineThrough,color:'#000'})
// Span('￥'+item.originPrice.toString()).fontColor('#999').fontSize(14)
// .decoration({type:TextDecorationType.LineThrough,color:'#ff323232'})
// }
// }
// .layoutWeight(1)
// .alignItems(HorizontalAlign.Start)
// }
// }
//
// })
// // Row(){
// // //左侧图片
// // Stack({alignContent:Alignment.TopStart}){
// // Image($r('app.media.product11')).width(100).borderRadius(8)
// // Text('Top1')
// // .fontColor('#ffffffff')
// // .backgroundColor('#f60')
// // .padding({left:5,right:5})
// // .borderRadius({topRight:8,bottomRight:8})
// // .margin({top:10})
// // }
// // //右侧文本
// // Column({space:10}){
// // Text('111').fontWeight(FontWeight.Bold).fontSize(18)
// // Text('141').fontColor('#999')
// // Text(){
// // Span('￥299').fontWeight(FontWeight.Bold)
// // Span('￥399').fontColor('#999').fontSize(12)
// // }
// // }
// // .layoutWeight(1)
// // .alignItems(HorizontalAlign.Start)
// // }
// }
// // .width('100%')
// // .height(100)
// // .backgroundColor('#999')
//
// }
// }
//
// .scrollBar(BarState.Off)
// .width('100%')
// .height('100%')
//
// // .height('100%')
// // Column 一般不设置高度，目的是由内容自适应撑开
//
// }
// // 去除滚动条
//
//
// // .backgroundColor('#8cd3ec')
//
//
// }以上是首页，我想给每个商品制作商品详情页，我做的是鸿蒙
本文探讨了LinearLayout结合FrameLayout的布局技巧，特别是如何利用android:divider和android:showDividers属性来实现底部分割线效果，并指出即使移除底部菜单项仍会保留分割线的情况。
扫一扫
1238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
