🎯 目标
构建一个通用、可复用的列表组件 CommonListView
,支持以下功能:
-
列表基础结构封装(包含 item 渲染、header/footer)
-
空数据展示占位图文
-
分割线控制(有/无/自定义颜色)
-
滚动到底加载更多
-
支持吸顶标题/分类组(后续篇扩展)
🧱 组件结构设计
┌──── 吸顶标题(可选) ─────┐
│ ▸ 列表项 A │
├──────────────────────────┤
│ ▸ 列表项 B │
├──────────────────────────┤
│ ▸ 列表项 C │
├─────── 加载更多中... ──────┤
│ ❗ 暂无数据,点击刷新 │
└──────────────────────────┘
🧰 组件实现:CommonListView.ets
@Component
export struct CommonListView<T> {
@Prop items: Array<T> = []
@Prop renderItem: (item: T, index: number) => any
@Prop showDivider: boolean = true
@Prop loading: boolean = false
@Prop onLoadMore: () => void = () => {}
@Prop emptyText: string = '暂无数据'
build() {
if (this.items.length === 0) {
Column() {
Image($r('