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

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

二级联动场景

场景描述

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

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

页面整体结构图
[图片] [图片]

实现原理

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

开发步骤

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

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

实现效果

图片

本文主要引用整理于鸿蒙官方文档


更多关于HarmonyOS 鸿蒙NEXT应用元服务常见列表操作二级联动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在鸿蒙NEXT中实现元服务列表的二级联动，主要使用ArkTS的List组件和数据绑定。通过@State和@Link装饰器管理联动状态，父列表项点击时更新子列表数据源。典型实现包括：

  1. 父列表使用ForEach渲染一级数据
  2. 点击事件中通过@Link更新子列表的@State数据
  3. 子列表动态绑定更新后的数据源

关键代码结构：

[@State](/user/State) firstList: Array<string> = [...]
[@Link](/user/Link) secondList: Array<string>

List() {
  ForEach(this.firstList, item => {
    ListItem(){
      Text(item).onClick(() => {
        this.secondList = getSubItems(item) 
      })
    }
  })
}

数据联动通过状态管理自动完成UI刷新。

更多关于HarmonyOS 鸿蒙NEXT应用元服务常见列表操作二级联动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS NEXT中实现二级联动列表，核心是通过两个List组件的交互控制来实现。以下是关键实现要点：

  1. 数据结构设计：
  • 使用嵌套数据结构，一级分类包含二级商品列表
  • 示例模型：
class NavTitleModel {
  titleName: string
  goodsList: GoodsDataModel[]
}
  1. 组件布局：
  • 左侧导航List使用简单ListItem展示分类标题
  • 右侧内容List使用ListItemGroup实现分组效果
  1. 联动控制：
  • 左侧点击事件触发右侧滚动：
.onClick(() => {
  this.listChange(index, true) 
})
  • 右侧滚动事件触发左侧高亮：
.onScrollIndex((index) => {
  this.listChange(index, false)
})
  1. 核心联动方法：
listChange(index: number, isGoods: boolean) {
  if (this.currentTitleId !== index) {
    this.currentTitleId = index;
    const scroller = isGoods ? this.goodsListScroller : this.navTitleScroller;
    scroller.scrollToIndex(index);
  }
}
  1. 性能优化：
  • 为ForEach提供稳定的key生成函数
  • 使用@State管理当前选中项
  • 避免不必要的重新渲染

这种实现方式流畅度高，交互自然，适合商品分类等二级联动场景。通过控制两个List的scrollToIndex方法，实现了完美的双向联动效果。

回到顶部