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

1.案例效果

image

2. 搭建页面框架

@Entry
@Component
struct Index {
  currentIndex: number = 0
  build() {
    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

  @Builder
  TabBarBuilder(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. 首页

image (1)

@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')
  }

  @Builder
  GoodsGridItem(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
  @Builder
  MiaoShaItemBuilder(imageUrl: string, text: string) {
    Column({space:10}){
      Image(imageUrl).width(50)
      Text(text).fontColor(Color.Red).fontWeight(FontWeight.Medium)
    }.alignItems(HorizontalAlign.Center)
  }

  @Builder
  SwiperItemBuilder(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:string
  description:string
  price:number
  commentCount:number
  jdMarketStatus:boolean = false //true是京东超市，false不是京东超市

  constructor(imageUrl: string, description: string, price: number, commentCount: number,jdMarketStatus:boolean) {
    this.imageUrl = imageUrl
    this.price = price
    this.commentCount = commentCount
    this.jdMarketStatus = jdMarketStatus
    if (this.jdMarketStatus) {
      this.description = "             "+description
    }else{
      this.description = description
    }
  }
}

4. 分类

image (2)

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
  @Builder
  TabBarBuilder(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
          })
        }
      }
    }
  }

  @Builder
  HotSellerGridItem(imageUrl: string, text: string) {
    GridItem() {
      Column() {
        Image(imageUrl)
          .width(70)
        Text(text)
      }
    }
  }
}

class HotSeller {
  imageUrl: string
  text: string

  constructor(imageUrl: string, text: string) {
    this.imageUrl = imageUrl
    this.text = text
  }
}

鸿蒙学习地址

posted @ 2025-11-14 11:15  leon_teacher  阅读(31)  评论(0)    收藏  举报