rc-lucky-picker v1.0.2

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 容器配置

option 数据配置

option.wheel 数据

wheel.data 数据

实例方法 Function

start 参数

opt