鸿蒙NEXT版实战开发案例：购物商城（附带源码）

最新推荐文章于 2024-11-14 10:35:43 发布

那只斑马不睡觉

最新推荐文章于 2024-11-14 10:35:43 发布

阅读量2.3k

点赞数 5

分类专栏：项目案例 ArkUI 文章标签： harmonyos 1024程序员节前端 list android ArkUI 鸿蒙系统

本文链接：https://blog.csdn.net/qq_39652397/article/details/143374111

版权

ArkUI 同时被 2 个专栏收录

770 篇文章

订阅专栏

项目案例

5 篇文章

订阅专栏

往期鸿蒙全套实战精彩文章必看内容：

本项目采用前后端分离设计，后端使用Apache+MySql+PHP，前端为鸿蒙原生。实现了完整的注册、登录、商品分类、购物车、购买、我的订单等功能，管理员可以在后端数据库对用户和商品进行增删改查操作。

完整效果图：

下面跟大家分享本项目的一些知识要点。

首页部分是一个List组件，内部分为三部分，banner图使用Swiper组件，商品分类和商品列表都使用Grid组件，具体代码如下：

List({space:8}){
          ListItem(){
            Swiper() {
              ForEach(this.data, (item:Resource) => {
                Image(item)
                  .size({ width: '100%', height: 200 })
                  .borderRadius(12)
                  .padding(8)
              })
            }
          }
          
          ListItem(){
            Grid(){
              ForEach(this.classData,(item:object,index:number) => {
                GridItem(){
                  Column(){
                    Image(item['cover'])
                      .width('100%')
                      .height('80%')
                    Text(item['classname'])
                      .fontColor(Color.Black)
                      .fontSize(14)
                      .margin({top:3})
                  }
                }
                .width(70)
                .height(90)
              })
            }
            .columnsTemplate('1fr 1fr 1fr 1fr')
            .rowsTemplate('1fr 1fr')
            .width('100%')
            .height(200)
            .backgroundColor(Color.White)
          }
          .width('100%')
          .height(200)

          ListItem(){
            Grid(){
              ForEach(this.goods,(item:object,index:number) => {
                GridItem(){
                  Column(){
                    Image(item['cover'])
                      .width('100%')
                      .height((this.screen_width - 25)/2)
                    Text(item['name'])
                      .fontColor(Color.Black)
                      .fontSize(17)
                      .margin({top:4})
                      .fontWeight(FontWeight.Bold)
                      .maxLines(2)
                    Text(item['price'])
                      .fontColor(Color.Red)
                      .fontSize(15)
                      .margin({top:6})
                  }
                  .alignItems(HorizontalAlign.Start)
                }
                .width((this.screen_width - 24)/2)
                .height(this.listHeight)
              })
            }
            .backgroundColor(Color.White)
            .columnsTemplate('1fr 1fr')
            .rowsGap(5)
            .columnsGap(5)
            .width('100%')
          }
          .width('100%')
        }
        .width('100%')
        .height('100%')

分类界面分为两部分，左侧使用List组件，右侧使用Grid组件，点击List列表后刷新右侧网格列表。

代码如下：

Row() {
        List(){
          ForEach(this.classData,(item:object,index)=>{
            ListItem(){
              Text(item['classname'])
                .fontColor(Color.Gray)
                .fontSize(17)
            }
            .backgroundColor(index == this.classIndex? 'rgb(255,255,255)' : 'rgb(240,240,240)')
            .width(100)
            .height(55)
            .onClick(()=>{
              this.getSubClass(item['id'])
              this.classIndex = index
            })
          })
        }
        .width(100)
        .height('100%')
        .backgroundColor(Color.White)

        Grid(){
          ForEach(this.subClassData,(item:object,index)=>{
            GridItem(){
              Column(){
                Image(item['cover'])
                  .width('100%')
                  .height((this.screen_width - 100)/3)
                Text(item['name'])
                  .fontSize(15)
                  .fontColor(Color.Black)
              }
              .onClick(()=>{
               
              })
            }
            .backgroundColor(Color.White)
            .width((this.screen_width - 100)/3)
            .height((this.screen_width - 100)/3 + 20)
          })
        }
        .columnsTemplate('1fr 1fr 1fr')
        .columnsGap(5)
        .rowsGap(5)
        .width(this.screen_width - 100)
        .height('100%')
      }

其他页面也都比较简单，大多数使用list组件实现。