HarmonyOS NEXT开发实战（5.0版）List和Scroller从简单到复杂列表布局场景

鸿蒙NEXT开发实战往期必看文章：

HarmonyOS NEXT应用开发案例实践总结合（持续更新......）

HarmonyOS NEXT应用开发性能优化实践总结（持续更新......）

一分钟了解”纯血版！鸿蒙HarmonyOS Next应用开发！

“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）

---

场景描述

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

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

场景二：双列表滚动联动，如城市选择

场景三：多列表滚动横向纵向联动，如汽车参数对比，股票信息列表

方案描述

场景一：

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

方案

运用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.banne