InfiniteScroll 无限滚动
连续加载列表内容。清晰呈现业务事实、状态和变化。
实时示例
运营记录 1
运营记录 2
运营记录 3
运营记录 4
运营记录 5
运营记录 6
运营记录 7
运营记录 8
运营记录 9
运营记录 10
运营记录 11
运营记录 12
运营记录 13
运营记录 14
运营记录 15
运营记录 16
运营记录 17
运营记录 18
运营记录 19
运营记录 20
运营记录 21
运营记录 22
运营记录 23
运营记录 24
Vue 示例
<el-infinite-scroll />使用规则
先保证扫描与比较效率,再增加视觉强调;必须定义加载、空和错误状态。
不要通过局部硬编码改变品牌色、圆角或状态语义;不要隐藏必要的操作反馈。
状态与变体
- 默认、悬停、聚焦、按下和禁用状态必须保持可辨识。
- 加载、空、错误状态按业务影响选用,不用品牌强调色表达错误。
- 紧凑尺寸只用于高密度后台场景,触控目标仍应满足可操作要求。
基础用法
<el-infinite-scroll>无限滚动</el-infinite-scroll>设计变量
color.background.surfacecolor.text.secondaryspacing.mdshadow.sm无障碍
状态同时使用文字;图片提供替代文本;复杂数据结构支持键盘浏览。