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

场景描述

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

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

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

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

方案描述

场景一：

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

效果图

方案

运用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(StickyStyle.Header) 
      .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true }) 
      .height('100%') 
      .layoutWeight(2) 
      // List组件触底模拟网络请求 
      .onReachEnd(() => { 
        if (this.productsArray.length >= 20) { 
          this.noMoreData = true 
          return 
        } 
        setTimeout(() => { 
          this.productsArray.push('商品' + (this.productsArray.length + 1)) 
        }, 2000) 
      }) 
    }