滚动选择框

示例

4月
5月
6月
7月
8月
9月
10月
11月
12月
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
基本用法

通过data属性给组件指定可选项,通过v-model双向绑定value值。data为数组,每一项结构为:

  1. label要展示的文案
  2. value 该项的取值

ScrollSelect可以无限循坏滚动,所以数据项的长度不应过短,否则会出现重复的项;支持拖拽、点击、滚动进行选择

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
2013年
2014年
2015年
2016年
2017年
2018年
2019年
2020年
2021年
2022年
数据长度无限

将数据生成函数传给data属性,可以实现无限长度数据的滚动,本例中:可以无限滚动选择年份

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
2019年
2020年
2021年
2022年
2013年
2014年
2015年
2016年
2017年
2018年
2019年
2020年
2021年
2022年
2013年
2014年
2015年
2016年
2017年
禁用状态

ScrollSelect添加disabled属性,可以禁用整个组件;给组件添加disable函数用来禁用单独的数据项。本例中,我们可以传入disable函数来禁用闰年选项

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
value 当前取值,可用v-model进行双向绑定 * undefined
data 组件的可选项 Array<Object> [{label, value}] []
disabled 是否禁用组件 Boolean false
disable 定义选项禁用逻辑,返回true则禁用该项 Function undefined
count 渲染可选项的DOM的个数,如果选区较大,可以增大该值 Number 19