代码演示
如何引入
import { ScrollList, ScrollItem } from '@chenzy-design/svelte';基本使用
滚动列表提供了一个类似于 iOS 操作系统的滚动选择模式，同时支持滚动至指定窗口位置选择与点击选择。
无限滚动列表
- 上午
- 下午
- 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" 时点击项即选中并高亮背景，不吸附居中。
hello world
- 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
API 参考
ScrollList
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| bodyHeight | body 高度 | string | number | - |
| class | 样式类名 | string | - |
| footer | 底部 addon | string | Snippet | - |
| header | 头部 addon | string | Snippet | - |
| style | 内联样式 | string | - |
ScrollItem
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| aria-label | 该列的无障碍标签 | string | - |
| class | 样式类名 | string | - |
| cycled | 是否为无限循环，仅在 mode 为 wheel 时生效 | boolean | false |
| list | 列表内容 | ItemData[] | [] |
| mode | 模式选择 | normal | wheel | wheel |
| motion | 是否开启滚动动画 | boolean | true |
| onSelect | 选中回调 | (data: ItemData) => void | - |
| selectedIndex | 选中项的索引 | number | 0 |
| style | 内联样式 | string | - |
| transform | 对选中项的变换，返回值会作为文案进行显示 | (value: any, text: string) => string | v => v |
ItemData
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disabled | 该项是否被禁止选择 | boolean | - |
| text | 每一项的文案 | string | - |
| transform | 该项处于选中状态时的变换，返回值会作为文案进行显示；ScrollItem 组件如果同时传入会优先选择 ItemData 中的 transform 方法 | (value: any, text: string) => string | v => v |
| value | 每一项的值 | any | - |
Accessibility
ARIA
ScrollItem支持传入aria-label，指定该列标签ScrollItem使用aria-disabled表示该项目是否被禁用ScrollItem使用aria-selected表示该项目是否被选中
设计变量
变量 | 默认值 | 用法 |
|---|---|---|
| --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） |
显示第 1 条-第 3 条，共 3 条
- 1