lucky-picker

无限滚动随机选择器

功能点 Feature

• 无限滚动
• 可交互滑动及点击滚动
• 自定义滚动时间
• 自定义 Tween.js 滚动动效，详见Tween.js动画算法使用示意实例
• 支持根据容器自适应缩放及设置缩放基点位置

效果 Demo

示例

使用 Usage

npm

npm install lucky-picker  --save

import LuckyPicker from 'lucky-picker'
new LuckyPicker(config, option)

script

<script src="lucky-picker/index.js"></script>

new window.LuckyPicker(config, option)

参数 Params

config 容器配置

| 名称 | 说明 | 类型 | 默认值 | | ----------- | ---------------------------------------------------- | ------------- | --------- | | el | 选择器名或选择器 Dom，必需 | string or Dom | - | | autoScale | 是否设置自适应缩放，默认渲染出的组件宽高为 456px * 144px | boolean | false | | scaleOrigin | 设置缩放基点，可选值同 transform-origin 属性 | string | 'initial' |

option 数据配置

| 名称 | 说明 | 类型 | 默认值 | | --------- | -------------------- | -------------------------------------------------------- | ---- | | wheel | 数据，必需 | object | - | | init | 初始化完成回调 | function(scrollIns, rs)，scrollIns：组件实例；rs：选中数据 | - | | end | start方法执行完成回调 | function(rs)，rs：选中数据 | - | | getResult | 交互执行完成回调 | function(rs)，rs：选中数据，interactive 设置为 true 生效 | - |

option.wheel 数据

| 名称 | 说明 | 类型 | 默认值 | | ----------- | ------------------- | --------------- | ----- | | data | 数据项，必需 | object[] | - | | selected | 初始选择项 | number / string | - | | infinite | 是否无限滚动 | boolean | true | | interactive | 是否可交互滑动及点击 | boolean | false |

wheel.data 数据

| 名称 | 说明 | 类型 | 默认值 | | ------- | ------- | --------------- | ----- | | value | 唯一标识 | number / string | - | | display | 展示内容 | string | - |

方法 function

| 名称 | 说明 | | ------------------- | --------------------------------------- | | start(index, opt) | 随机滚动选择执行 | | destroy() | 销毁实例 | | appendItem(dataArr) | 插入数据，格式同创建实例 wheel.data | | removeItem(valArr) | 删除数据，值类型为 wheel.data.value | | newItem(dataArr) | 替换使用新数据，格式同创建实例 wheel.data |

start 参数

| 名称 | 说明 | 类型 | 默认值 | | ----- | ------------------ | ------ | ----- | | index | 随机选择项序号 | number | 随机数 | | opt | 执行时间、动效等配置 | object | - |

opt

| 名称 | 说明 | 类型 | 默认值 | | --------- | ------------------ | ------ | ----- | | time | 执行时间，单位毫秒ms | number | 5000 | | animation | 执行动效，可选值详见Tween.js动画算法使用示意实例 | string | 'Quad.easeInOut' |