HarmonyOS 实战开发 —— 基于List和Scroller由简单到复杂列表布局开发实践

---

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

---

场景描述

在多列表页面开发中，数据展示往往有联动关系，

• 场景一：单列表布局多长列表页面，如门户首页、商城首页
• 场景二：双列表滚动联动，如城市选择
• 场景三：多列表滚动横向纵向联动，如汽车参数对比，股票信息列表

方案描述

场景一：

单列表布局多长列表页面，如门户首页、商城首页

效果图

方案

运用List组件作为整个首页长列表的容器，通过ListItem对不同模块进行定制。

1.Refresh包裹List实现下拉刷新
2.ListItem-0嵌套Swiper实现轮播图。
3.ListItem-1嵌套Grid实现快捷入口。
4.ListItem-2嵌套Column实现秒杀
5.ListItemGroup实现商品分类列表
6.最底部ListItem实现触底自动加载

核心代码

build() { 
  Column() { 
    // 搜索框 置顶 
    if (this.searchSticky) { 
      this.searchBarBuilder() 
    } 
    // 下拉刷新组件 
    Refresh({ refreshing: $$this.isRefreshing }) { 
      // List组件作为长列表布局 
      List({ space: 10 }) { 
        // 搜索框跟随 
        if (!this.searchSticky) { 
          ListItem() { 
            this.searchBarBuilder() 
          } 
        } 
        // ListItem 自定义Swiper轮播图模块 
        ListItem() { 
          this.bannerBuilder() 
        } 
 
        // ListItem 自定义Grid快接入口模块 
        ListItem() { 
          this.quickBuilder() 
        } 
 
        // ListItem 自定义Column秒杀模块 
        ListItem() { 
          this.flashBuilder() 
        } 
 
        // ListItemGroup 商品分类列表 
        this.productsBuilder() 
        // 最后ListItem 自定义触底加载更多 
        ListItem() { 
          this.footerLoadingBuilder() 
        }.height(50).width('100%').backgroundColor(0xeeeeee) 
      } 
      .sticky(StickySty