鸿蒙应用开发之京东页面案例

1.案例效果

2. 搭建页面框架

@Entry
@Component
struct Index {currentIndex: number = 0build() {Column() {Tabs() {TabContent() {Home()}.tabBar(this.TabBarBuilder(0, $r('app.media.ic_home'), '首页'))TabContent() {Category()}.tabBar(this.TabBarBuilder(1, $r('app.media.ic_category'), '分类'))TabContent() {}.tabBar(this.TabBarBuilder(2, $r('app.media.ic_shopcar'), '购物车'))TabContent() {}.tabBar(this.TabBarBuilder(3, $r('app.media.ic_my'), '首页'))}.width('100%').height('100%').barHeight(50).barWidth('100%').barBackgroundColor(Color.White).barPosition(BarPosition.End).onChange(index => {this.currentIndex = index}).scrollable(false).animationDuration(0)}.height('100%').width('100%').backgroundColor('#EAEEF4')}@State currentIndex: number = 2@BuilderTabBarBuilder(index: number, icon: ResourceStr, text: string) {Column() {Image(icon).width(25).fillColor(this.currentIndex === index ? '#F51608' : '#87A3C3')Text(text).fontSize(12).fontColor(this.currentIndex === index ? '#F51608' : '#87A3C3')}.height('100%').justifyContent(FlexAlign.Center)}
}

3. 首页

@Component
export struct Home {//提供一个商品的数组goodsList:Goods[] = [new Goods("https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/197978/10/39051/92387/667e0fe5F3b1c2ce9/ab30f25b23c99c90.jpg!q70.dpg.webp","温鑫福单人沙发床折叠两用2024新款首发值得拥有限时抢购",299,500,true),new Goods("https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/221991/34/39149/80586/6623f28bFcff4dee3/ea50b82382c17f01.jpg!q70.dpg.webp","蓝月亮深层清洁护理液薰衣草香一瓶顶10瓶",15,10000,false),new Goods("https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/180401/28/46743/63818/667903e6Faeacc268/16777ee79837e935.png.webp","【PU超纤】【真皮软牛皮】特价清仓处理",300,2000,false),new Goods("https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/229009/35/26100/149457/66ea6eb3F2843ec74/ceb575088252ca9f.jpg!q70.dpg.webp","京东超市乐而雅花王零触感特薄夜用卫生巾 30",500,2500,true)]build() {Column() {//首页标题栏Row({ space: 10 }) {Image($r('app.media.ic_jd_menu')).width(30).height(30)Search({ icon: "/images/ic_jd_search.png", placeholder: '机顶盒' }).backgroundColor(Color.White).height(30).layoutWeight(1)Text('登录').fontColor(Color.White)}.width('100%').height(50).backgroundColor('#EC615B').padding({ left: 10, right: 10 })Scroll(){Column(){//首页轮播Row() {Row() {Swiper() {Row() {this.SwiperItemBuilder('https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png','京东超市')this.SwiperItemBuilder('https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png','京东电器')this.SwiperItemBuilder('https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png','服饰美妆')this.SwiperItemBuilder('https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png','充值中心')this.SwiperItemBuilder('https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png','PLUS会员')}.width('100%').height('100%').justifyContent(FlexAlign.SpaceEvenly)Row() {this.SwiperItemBuilder('https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png','京东超市')this.SwiperItemBuilder('https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png','京东电器')this.SwiperItemBuilder('https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png','服饰美妆')this.SwiperItemBuilder('https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png','充值中心')this.SwiperItemBuilder('https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png','PLUS会员')}.width('100%').height('100%').justifyContent(FlexAlign.SpaceEvenly)}.width('100%').height('100%')}.backgroundColor(Color.White).width('95%').height('90%').borderRadius(10)}.backgroundColor('#EC615B').width('100%').height(100).justifyContent(FlexAlign.Center).linearGradient({colors: [['#EC615B', 0], ['#F6F6F6', 0.8]]})//京东秒杀Row() {Row() {Column({space:8}){Image($r('app.media.ic_jd_ms_font')).width(80)Text('限时低价').fontColor(Color.White).fontWeight(FontWeight.Medium)Row({space:4}){Text('去抢购').fontColor(Color.Red).fontSize(10)Image($r('app.media.ic_jd_goto_ms')).width(10)}.backgroundColor(Color.White).borderRadius(10).padding(3)}.width('30%').height('100%').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Center).padding({left:10})Row(){//滑动组件：里面只能有一个容器组件Scroll(){Row({space:10}){this.MiaoShaItemBuilder('https://m.360buyimg.com/seckillcms/jfs/t1/6784/2/39589/151768/66f23a22Fcf78d7b3/93f15eccdc1bb635.jpg','¥1999')this.MiaoShaItemBuilder('https://m.360buyimg.com/seckillcms/jfs/t1/6784/2/39589/151768/66f23a22Fcf78d7b3/93f15eccdc1bb635.jpg','¥1999')this.MiaoShaItemBuilder('https://m.360buyimg.com/seckillcms/jfs/t1/6784/2/39589/151768/66f23a22Fcf78d7b3/93f15eccdc1bb635.jpg','¥1999')this.MiaoShaItemBuilder('https://m.360buyimg.com/seckillcms/jfs/t1/6784/2/39589/151768/66f23a22Fcf78d7b3/93f15eccdc1bb635.jpg','¥1999')this.MiaoShaItemBuilder('https://m.360buyimg.com/seckillcms/jfs/t1/6784/2/39589/151768/66f23a22Fcf78d7b3/93f15eccdc1bb635.jpg','¥1999')this.MiaoShaItemBuilder('https://m.360buyimg.com/seckillcms/jfs/t1/6784/2/39589/151768/66f23a22Fcf78d7b3/93f15eccdc1bb635.jpg','¥1999')this.MiaoShaItemBuilder('https://m.360buyimg.com/seckillcms/jfs/t1/6784/2/39589/151768/66f23a22Fcf78d7b3/93f15eccdc1bb635.jpg','¥1999')this.MiaoShaItemBuilder('https://m.360buyimg.com/seckillcms/jfs/t1/6784/2/39589/151768/66f23a22Fcf78d7b3/93f15eccdc1bb635.jpg','¥1999')this.MiaoShaItemBuilder('https://m.360buyimg.com/seckillcms/jfs/t1/6784/2/39589/151768/66f23a22Fcf78d7b3/93f15eccdc1bb635.jpg','¥1999')this.MiaoShaItemBuilder('https://m.360buyimg.com/seckillcms/jfs/t1/6784/2/39589/151768/66f23a22Fcf78d7b3/93f15eccdc1bb635.jpg','¥1999')}}.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)}.height('96%').layoutWeight(1).backgroundColor(Color.White).borderRadius(10).padding({left:10,right:10})}.width('100%').height('100%').backgroundImage($r('app.media.jd_ms_bg')).backgroundImageSize(ImageSize.Cover).borderRadius(10).margin({top:10}).padding({right:2.5})}.width('100%').height(120).padding({ left: 10, right: 10 })//商品列表（网格组件）Row(){Grid(){ForEach(this.goodsList,(item:Goods)=>{this.GoodsGridItem(item)})}.columnsTemplate("1fr 1fr").columnsGap(10).rowsGap(10).margin({top:20})}.padding({left:10,right:10})}}.layoutWeight(1).scrollBar(BarState.Off)}.width('100%').height('100%').backgroundColor('#F6F6F6')}@BuilderGoodsGridItem(item:Goods) {GridItem(){Column(){Image(item.imageUrl).borderRadius({topLeft:10,topRight:10})Column({space:8}){Stack({alignContent:Alignment.TopStart}){Text(item.description).maxLines(2).fontSize(16).textOverflow({overflow:TextOverflow.Ellipsis})if (item.jdMarketStatus){Image($r('app.media.ic_jd_market')).width(50)}}Text(`￥${item.price}`).fontWeight(FontWeight.Medium).fontColor(Color.Red)Row(){Text(`${item.commentCount}条评论`).fontSize(12).fontWeight(FontWeight.Medium).fontColor(Color.Gray)Text('看相似').backgroundColor('#F2F2F2').borderColor(10).padding({left:10,right:10}).fontSize(12).fontWeight(FontWeight.Medium)}.width('100%').justifyContent(FlexAlign.SpaceBetween)}.width('100%').alignItems(HorizontalAlign.Start).margin({top:10}).padding({left:10,right:10,bottom:10})}.backgroundColor(Color.White).borderRadius({bottomLeft:10,bottomRight:10})}}//用来构建京东描述的UI@BuilderMiaoShaItemBuilder(imageUrl: string, text: string) {Column({space:10}){Image(imageUrl).width(50)Text(text).fontColor(Color.Red).fontWeight(FontWeight.Medium)}.alignItems(HorizontalAlign.Center)}@BuilderSwiperItemBuilder(image: string, text: string) {Column({ space: 10 }) {Image(image).width(25).height(25)Text(text).fontSize(12)}.height('100%').justifyContent(FlexAlign.Center)}
}//商品类：用来封装每一个商品的数据
class Goods{imageUrl:stringdescription:stringprice:numbercommentCount:numberjdMarketStatus:boolean = false //true是京东超市，false不是京东超市constructor(imageUrl: string, description: string, price: number, commentCount: number,jdMarketStatus:boolean) {this.imageUrl = imageUrlthis.price = pricethis.commentCount = commentCountthis.jdMarketStatus = jdMarketStatusif (this.jdMarketStatus) {this.description = "             "+description}else{this.description = description}}
}

4. 分类

4.1 分类导航

import { WomenDress } from './WomenDress'@Component
export struct Category {categoryNames: string[] = ['电器', '洗护', '女装', '手机', '健康', '男装', '美妆', '电脑', '运动', '内衣', '母婴', '数码', '百货', '鞋包','办公', '家装', '饰品', '车品', '图书', '生鲜', '家纺']build() {Column() {Tabs({ barPosition: BarPosition.Start, index: this.currentIndex }) {ForEach(this.categoryNames, (name: string, index: number) => {TabContent() {if (name==='女装') {WomenDress()}}.tabBar(this.TabBarBuilder(index, name))})}.vertical(true).barWidth(100).barMode(BarMode.Scrollable)}}@State currentIndex: number = 0@BuilderTabBarBuilder(index: number, text: string) {Text(text).width('100%').height(50).backgroundColor(this.currentIndex === index ? Color.White : '#F8F8F8').textAlign(TextAlign.Center).onClick(() => {this.currentIndex = index})}
}

4.2 分类内容

@Component
export struct WomenDress {hotSellerList: HotSeller[] = [new HotSeller("https://m.360buyimg.com/babel/jfs/t1/109228/18/39184/5394/6465dcebF181426f6/538d2b20051b085f.jpg",'卫衣'),new HotSeller("https://m.360buyimg.com/babel/jfs/t1/216457/11/21629/2132/6388e999E8ce79687/978ced6fc84fa089.jpg",'针织衫'),new HotSeller("https://m.360buyimg.com/babel/jfs/t1/221444/22/25322/4698/6465dcdfFd742fbe6/f408917b9e76970c.jpg",'牛仔裤'),new HotSeller("https://m.360buyimg.com/babel/jfs/t1/141592/17/35597/2793/643e1416Ff7c6ed7d/c2af3f2744ccad75.jpg",'短外套'),new HotSeller("https://m.360buyimg.com/babel/jfs/t1/123739/38/37494/3885/6464a10aF24a21b8f/77c8ca19999ec7ae.jpg",'连衣裙'),new HotSeller("https://m.360buyimg.com/babel/jfs/t1/95562/9/23497/3620/6465dccaF6e94393d/1b0f99c8025f1061.jpg",'短袖'),new HotSeller("https://m.360buyimg.com/babel/jfs/t1/130210/40/37370/2119/646dd6bdFaedb67df/f88d736729ccf2f0.jpg",'短外套'),new HotSeller("https://m.360buyimg.com/babel/jfs/t1/134338/28/33700/7542/646dd70dF37610f24/58e9a6404e258ae4.jpg",'短裤'),new HotSeller("https://m.360buyimg.com/babel/jfs/t1/56989/35/24891/6960/6465dcf4F8694df82/b61c2117f7910d02.jpg",'衬衫'),]build() {Scroll(){Column({space:20}) {Column({space:10}){Text('热卖选购').fontSize(18).fontWeight(FontWeight.Bold).fontColor(Color.Black).width("100%")Row() {Grid() {ForEach(this.hotSellerList, (item: HotSeller) => {this.HotSellerGridItem(item.imageUrl, item.text)})}.columnsTemplate("1fr 1fr 1fr").rowsGap(10).columnsGap(10)}.padding({left: 10, right: 10})}Column({space:10}){Text('女士上衣').fontSize(18).fontWeight(FontWeight.Bold).fontColor(Color.Black).width("100%")Row() {Grid() {ForEach(this.hotSellerList, (item: HotSeller) => {this.HotSellerGridItem(item.imageUrl, item.text)})}.columnsTemplate("1fr 1fr 1fr").rowsGap(10).columnsGap(10)}.padding({left: 10, right: 10})}Column({space:10}){Text('裤子').fontSize(18).fontWeight(FontWeight.Bold).fontColor(Color.Black).width("100%")Row() {Grid() {ForEach(this.hotSellerList, (item: HotSeller) => {this.HotSellerGridItem(item.imageUrl, item.text)})}.columnsTemplate("1fr 1fr 1fr").rowsGap(10).columnsGap(10)}.padding({left: 10, right: 10})}}}}@BuilderHotSellerGridItem(imageUrl: string, text: string) {GridItem() {Column() {Image(imageUrl).width(70)Text(text)}}}
}class HotSeller {imageUrl: stringtext: stringconstructor(imageUrl: string, text: string) {this.imageUrl = imageUrlthis.text = text}
}