## 基础用法 List 组件用于展示结构化列表内容,通过 `itemChild` Snippet 定义每个列表项的渲染内容。 ## 间距、内边距和圆角 - 使用 `gap` 设置列表项之间的间距。 - 使用 `mx`、`my` 设置列表整体外边距。 - 使用 `itemPx`、`itemPy` 设置列表项内边距。 - 使用 `itemRadius` 设置列表项圆角。 设置 `divider` 为 `true` 可以启用分割线。分割线与间距可同时使用,如需更紧凑的样式,可以将 `gap` 设置为 `0`。 ## 过渡动画 List 默认使用 `slideRight` 过渡动画。可以通过 `transition` 切换动画类型,设置为 `null` 可关闭动画。使用 `transitionDelay` 控制每项动画延迟时间。 动画在列表项进入和移除时都会生效: - `slideRight`:从右侧滑入或滑出。 - `slideUp`:从下方滑入或滑出。 - `fadeScale`:淡入缩放并淡出缩放。 - `stagger`:奇偶项交错滑入并交错滑出。 ## 批量选择 设置 `batchSelectable` 显示批量选择入口,支持以下能力: - `batchMode`:批量选择模式,支持双向绑定。 - `batchSelected`:选中项 key 数组,支持双向绑定。 - `batchActions`:批量操作按钮配置。 - `onbatchChange`:选中项变化回调。 ## 滑动操作 List 支持左滑显示操作按钮,最多 4 项。 - `swipeActions`:滑动操作按钮配置。 - `swipeHint`:提示显示模式,支持 `none`、`first`、`all`。 - `swipeThreshold`:滑动触发阈值(像素)。 `SwipeActionProps` 支持 `icon`、`text`、`bgColor`、`onclick`,其中 `bgColor` 支持 `theme`、`success`、`warning`、`error`、`info`,`primary` 作为 `theme` 的别名。 ## 点击反馈与箭头 - `clickable`:启用点击反馈。 - `arrow`:显示右侧箭头指示器。 - `onclickItem`:列表项点击回调。 ## 自定义头部和底部 通过 `headerChild` 和 `footerChild` Snippet 可以在列表顶部和底部添加自定义内容。 ## 空状态处理 List 组件不处理空状态,请在外部判断数据并渲染对应内容。