rc-lucky-picker

无限滚动随机选择器（React） Infinite scrolling random selector (React)

功能点 Feature

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

安装 Install

npm install rc-lucky-picker  --save

示例 Usage

基本 Basic

/* react live*/
<desc>
基本用法。
</desc>
<script>
import React, { useState } from 'react'
import LuckyPicker from 'rc-lucky-picker'

const App = () => {
  const [luckyPicker, handleLuckyPicker] = useState()

  const data = [
    { value: 0, display: "张三" },
    { value: 1, display: "李四十个字李四十个字" },
    { value: 2, display: "王二" },
    { value: 3, display: "麻子" },
    { value: 4, display: "顺五五五五五五五五五五五五五五五五五五五五五五五五五"},
    { value: 5, display: "毛六" },
    { value: 6, display: "周七" }
  ];

  const config = {
    autoScale: true
  };
  const option = {
    wheel: {
      data: data,
      selected: 0,
      interactive: true
    },
    init: function (scrollIns) {
      handleLuckyPicker(scrollIns)
    }
  };

  const start = () => {
    var index = (Math.random() * data.length) >> 0;
    var opt = {
      time: 4000,
      animation: "Quad.easeInOut",
    };
    luckyPicker && luckyPicker.start(index, opt);
  }
  return (
    <div style={{textAlign: 'center'}}>
      <LuckyPicker config={config} option={option} />
      <button onClick={() => { start() }}>start</button>
    </div>
  );
};

export default App;

</script>

API

参数 Params

config 容器配置

| 名称 | 说明 | 类型 | 默认值 | | ----------- | ---------------------------------------------------- | ------------- | --------- | | 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' |