ScrollList
滚动列表，类似 iOS 的滚动选择模式。ScrollList 是纯容器（header/footer/bodyHeight），内部放若干 ScrollItem 组成多列。ScrollItem 有 wheel（滚轮，滚动/点击将候选吸附到中央选区居中）与 normal（普通列表，点击选中并高亮）两种模式；wheel 支持 cycled 无限循环、motion 缓动、transform 选中项文案变换、disabled 跳过。选择通过 selectedIndex 受控 + onSelect(data) 回调（data 含 value/index/type）。复用 @chenzy-design/core 纯函数（resolveItemText/centerOffset/nearestIndex/wrapIndex/scrollFrame/shouldPrepend/shouldAppend）。
如何引入
import { ScrollList, ScrollItem } from '@chenzy-design/svelte';基本使用
滚轮三列（时段 / 小时 / 分钟），滚动或点击选择，选中项吸附到中央选区；header/footer 自定义头尾。
- 上午
- 下午
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
普通列表模式
mode="normal" 不吸附居中，点击项即选中并高亮背景（对齐 Semi ScrollList 演示）。
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
单列无限循环
cycled 到头尾可继续翻动、无缝衔接；奇数项禁用会被滚动落定跳过；motion=false 直达无缓动。
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
选中项文案变换
transform 对选中项文案变换（加单位）；项级 transform 优先于列级公共 transform。
- 00
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 9 时
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
自定义 body 高度
bodyHeight 收窄可视高度，wheel 列按实测高度自适应居中吸附。
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
日期三列联动
年 / 月 / 日三 wheel 列，改年/月时日列天数联动重算并夹回合法日。
- 2015
- 2016
- 2017
- 2018
- 2019
- 2020
- 2021
- 2022
- 2023
- 2024
- 2025
- 2026
- 2027
- 2028
- 2029
- 2030
- 2031
- 2032
- 2033
- 2034
- 1 月
- 2 月
- 3 月
- 4 月
- 5 月
- 6 月
- 7 月
- 8 月
- 9 月
- 10 月
- 11 月
- 12 月
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
API 参考
ScrollList
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
header | 头部 addon（对齐 Semi header） | Snippet | string | undefined |
footer | 底部 addon（对齐 Semi footer） | Snippet | string | undefined |
bodyHeight | body 高度；数字按 px（对齐 Semi bodyHeight） | number | string | undefined |
class | 根节点类名（对齐 Semi className） | string | undefined |
style | 根节点内联样式（对齐 Semi style） | string | undefined |
children | 列内容：若干 <ScrollItem> | Snippet | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onSelect | — | 选中项变化（wheel 滚动落定/点击、normal 点击）；载荷 {...item, value, index, type} |
Slots
| 名称 | 说明 |
|---|---|
header | ScrollList 头部 addon |
footer | ScrollList 底部 addon |
ScrollItem
单列滚动选择：wheel（滚轮吸附居中）/ normal（点击选中并高亮）。对齐 Semi ScrollItem。
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
mode | 模式：wheel 吸附居中 / normal 点击选中 | 'wheel' | 'normal' | 'wheel' |
cycled | 无限循环（仅 wheel 生效） | boolean | false |
list | 列表数据，项 = { value; text?; disabled?; transform? } | ScrollItemData[] | [] |
selectedIndex | 选中项索引（受控） | number | 0 |
motion | 是否开启滚动缓动动画 | boolean | true |
transform | 选中项文案变换（列级公共） | (value, text) => string | undefined |
type | 列标识，透传回 onSelect 供外层区分列 | string | number | undefined |
onSelect | 选中回调，data 含 value/index/type | (data: ScrollItemSelectPayload) => void | undefined |
class | 列样式类名 | string | undefined |
style | 列内联样式 | string | undefined |
ariaLabel | 列无障碍标签 | string | undefined |
Accessibility
- 每列 ul role=listbox + aria-label + aria-multiselectable=false；每项 li role=option + aria-selected；disabled 项 aria-disabled。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-transition-delay-scroll-list-selected-item-bg | 0ms | 滚动列表选中项背景色过渡延迟 |
--cd-transition-duration-scroll-list-selected-item-bg | var(--cd-motion-duration-none) | 滚动列表选中项背景色过渡时长 |
--cd-transition-function-scroll-list-selected-item-bg | var(--cd-motion-ease-standard) | 滚动列表选中项背景色过渡曲线（easeOut） |