HarmonyOS NEXT应用元服务常见列表操作二级联动

鸿蒙时代

发布于 2025-7-2 10:14

浏览

0收藏

二级联动场景

场景描述

通过左边一级列表的选择，联动更新右边二级列表的数据，常用于商品分类选择、编辑风格等二级类别选择页面。

本场景以商品分类列表页面为例，分别通过List组件，对左侧分类导航和右侧导航内容进行展示。在进入页面后，点击左侧分类导航，右侧展示对应导航分类详情列表数据；滑动右侧列表内容，列表标题吸顶展示，左侧对应导航内容则高亮显示。

页面整体结构图	页面效果图

实现原理

左右各用一个List实现，分别设置其onScrollIndex()事件，左侧List在回调中判断数据项切换时，调用右侧List滚动到相应类别的对应位置，右侧同理。

开发步骤

分别通过List组件构建左侧分类导航数据和右侧分类内容数据。

// Left List Data Display.
List({ scroller: this.navTitleScroller }) {
  ForEach(this.categoryList, (item: NavTitleModel, index: number) => {
    ListItem() {
      Text(item.titleName)
        // ...
    }
  }, (item: NavTitleModel) => JSON.stringify(item.titleName))
}
// ...

// Display of List Content on the Right.
List({ scroller: this.goodsListScroller }) {
  ForEach(this.categoryList, (item: NavTitleModel) => {
    ListItemGroup({ space: 12, header: this.goodsHeaderBuilder(item.titleName) }) {
      ForEach(item.goodsList, (goodsItem: GoodsDataModel) => {
        ListItem() {
          Row() {
            Image(goodsItem.imgUrl)
              // ...
            Column() {
              Text(goodsItem.goodsName)
                // ...
              Text('￥' + goodsItem.price)
                // ...
            }
            // ...
          }
          // ...
        }
      }, (goodsItem: GoodsDataModel) => JSON.stringify(goodsItem.goodsId))
    }
  }, (item: NavTitleModel) => JSON.stringify(item.goodsList))
}

CategoryPage.ets

给左侧导航列表添加点击事件，右侧分类详情列表添加onScrollIndex()事件，并调用自定义事件listChange方法，在listChange方法内部根据isGoods变量的值，调用对应列表控制器的scrollToIndex()事件，实现导航列表和分类详情数据的联动效果。

// List sliding event.
listChange(index: number, isGoods: boolean) {
  if (this.currentTitleId !== index) {
    this.currentTitleId = index;
    if (isGoods) {
      // IsGoods is true, controlling the data in the right-hand list to slide to the specified index.
      this.goodsListScroller.scrollToIndex(index);
    } else {
      // IsGoods is set to false, controlling the left list data to slide to the specified index.
      this.navTitleScroller.scrollToIndex(index);
    }
  }
}

CategoryPage.ets

// Left List Data Display.
List({ scroller: this.navTitleScroller }) {
  ForEach(this.categoryList, (item: NavTitleModel, index: number) => {
    ListItem() {
      Text(item.titleName)
        // ...
        .onClick(() => {
          // Pass in the current list item index and true.
          this.listChange(index, true);
        })
    }
  }, (item: NavTitleModel) => JSON.stringify(item.titleName))
}
// ...

// Display of List Content on the Right.
List({ scroller: this.goodsListScroller }) {
  // ...
}
// ...
.onScrollIndex((index: number) => {
  // Pass in the current list item index and false.
  this.listChange(index, false)
})

CategoryPage.ets

实现效果