展示类 · ScrollList
滚动列表
滚动列表。

代码演示

如何引入

基本使用

滚动列表提供了一个类似于 iOS 操作系统的滚动选择模式,同时支持滚动至指定窗口位置选择与点击选择。

API 参考

ScrollList

属性说明类型默认值
bodyHeightbody高度string | number
className样式类名string''
footer底部 addonReactNode''
header头部 addonReactNode''
style内联样式CSSProperties{}

ScrollItem

属性说明类型默认值
className样式类名string''
cycled是否为无限循环,仅在 mode 为 "wheel" 时生效booleanfalse
list列表内容ItemData[][]
motion是否开启滚动动画Motiontrue
onSelect选中回调(data: ItemData) => voidNOOP
selectIndex选中项的索引number0
style内联样式CSSProperties{}
transform对选中项的变换,返回值会作为文案进行显示(value: any, text: string) => stringv => v

ItemData

属性说明类型默认值
disabled该项是否被禁止选择boolean
text每一项的文案string
transform该项处于选中状态时的变换,返回值会作为文案进行显示,ScrollItem 组件如果同时传入会优先选择 ItemData 中的 transform 方法(value: any, text: string) => stringv => v
value每一项的值any

Accessibility

ARIA

  • ScrollItem 支持传入 aria-label, 指定该列标签
  • ScrollItem 使用 aria-disabled 表示该项目是否被禁用
  • ScrollItem 使用 aria-selected 表示该项目是否被选中

设计变量

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED