【鸿蒙UI实战开发】基于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)

      })

    }

    // 下拉刷新模拟网络请求

    .onRefreshing(() => {

      setTimeout(() => {

        this.productsArray = ['商品1', '商品2', '商品3', '商品4', '商品5']

        this.noMoreData = false

        this.isRefreshing = !this.isRefreshing

      }, 2000)

    })

    .layoutWeight(1)

    .width('95%')

  }

}

场景二：

双列表滚动同向联动，如城市选择

效果图

方案

整体运用Stack组件（List组件+List组件）布局，左List作为城市列表，右List快捷导航列表，通过ListItem对对应数据进行渲染。

1.左List用ListItemGroup对城市数据进行分组

2.右List用ListItem对首字母进行渲染

3.通过右List首字母导航点击可以切换左List滚动到对应分组

核心代码

@State private selectGroupIndex: number = -1 //导航栏选中index

private cityScroller: ListScroller = new ListScroller() // 城市列表Scoller控制器

private navgationScroller: ListScroller = new ListScr