basescroller
滚动选择组件。
Install
$ npm install anima-basescroller --save
Usage
var BaseScroller = ;var nameScroller = options; // use BaseScroller
API
实例化选项 options
- container
DOM Object
组件插入的容器 [optional] - data
array<string|number|object>
组件数据集 [optional] - object 包含 name 和 value,表示显示值和实际取值
- selectedCallback
function
选中后的回调函数,回调参数有两个: [optional] - current 当前选中的值
- prev 之前的值
- itemHeight
number
每个可选项的高度值,单位 px,默认值为 34。添加此选项需要修改样式表中 .scroller-item 下的 height 和 line-height 为 itemHeight;.current-indicator 下的 height 为 itemHeight - 2(1px 的 border-top 和 border-bottom)。同时建议设置 .scroller-item 合适的 font-size。 [optional] - itemsNumber
number
组件可见条目的数量,必须为奇数,默认值为 7。添加此选项需要修改样式表中 .scroller-component 的 height 为 itemsNumber * itemHeight;以及 .current-indicator 下的 top 为 itemHeight * (itemsNumber - 1) / 2。 [optional] - className
string
组件元素 class,用于自定义组件样式,支持以空格分隔的多个 class [optional]
实例方法
- selectByIndex(index) 通过索引选择一项
- @param index {number} 非负索引值 [required]
- select(value) 通过值选中一项
- @param value {string|number} [required]
- selectThenCallback(value) 选中后注册的回调函数,参数同 select
- getValue() 获取当前的选中值
- setSelectedCallback(selectedCallback) 设置选中后的回调函数,传入回调函数的参数同实例化选项中的 selectedCallback
- render(data) 重新渲染组件,参数 data 同实例化选项中的 data
- appendTo(container) 将组件插入到一个 DOM 元素中