@mobiletools/scrollpicker NPM

What is Scroll-Picker

Scroll-Picker is a tool for WEB mobile application, will provide a wheel-like picker, user can scroll the items and pick the target item.

Build in Web Component, No dependency!

【查看中文文档】

Features

A mobile select tool, build with native js without any third-party dependency.
Web Component, easy to use in any projects.
No colums limitation, you can use it in your case.
Theme and cusumize color config support.

Preview

Image text

Installation

Method1 tag import：

<script src="/path/to/scroll-picker.min.js" type="text/javascript"></script>

Method2 npm install：

npm i @mobiletools/scrollpicker -S

After install from NPM but you still need import scroll-picker.js file to your project.

Getting Started

Single colum demo

<scroll-picker id="test1" title="Day">
  <button>day picker</button>
</scroll-picker>

<script>
  const ele1 = document.querySelector("#test1");

  setTimeout(() => {
    ele1.colums = [
      [
        { id: "1", value: "Sunday" },
        { id: "2", value: "Monday" },
        { id: "3", value: "Tuesday" },
        { id: "4", value: "Wensday" },
        { id: "5", value: "Thursday" },
        { id: "6", value: "Friday" },
        { id: "7", value: "Saturday" },
      ],
    ];
  }, 2000);
</script>

Mutil-colum scroll picker

<scroll-picker id="test2" title="选择日期" stopoverlaycancel="true">
  <button>date picker</button>
</scroll-picker>

<script>
  const ele = document.querySelector("#test2");

  setTimeout(() => {
    ele.colums = [
      [
        { id: "1", value: "2019" },
        { id: "2", value: "2020" },
        { id: "3", value: "2021" },
      ],
      [
        ...new Array(12)
          .fill(1)
          .map((v, i) => ({ id: `${i + 4}`, value: i + 1 })),
      ],
      [
        ...new Array(30)
          .fill(1)
          .map((v, i) => ({ id: `${i + 16}`, value: i + 1 })),
      ],
    ];
    ele.options = {
      theme: "dark",
      confirmText: "Confirm",
      cancelText: "Cancel",
    };
  }, 2000);
</script>

How does it works

After you add scroll-picker to the dom, it will listen on the click event, once user click the scroll-picker or the inner stuff, it will trigger the show function to show the picker.

And this logic is handled inside the component, user don't need pay attention.

Settings

Name	Default	Type	Description
title	No default value	String	The title of the scroll picker
colums	Required parameter. No default value	Array	The data displayed on the wheel
stopoverlaycancel	false	Boolean	The flag control the scroll picker over close the current scroll picker or not
options	No default value	Object	The options to help setup the scroll picker, can configure title, colums and style
theme	dark	String	The settings for the scroll picker theme, can choose light or dark
cancelText	Cancel	String	The text display on the cancel button
confirmText	Confirm	String	The text display on the confirm button

Options

Name	Default	Type	Description
title	No default value	String	The title of the scroll picker
colums	Required parameter. No default value	Array	The data displayed on the wheel
theme	dark	String	The settings for the scroll picker theme, can choose light or dark
containerBackgroundColor	dark:'rgba(45, 52, 61, .9)', light: 'rgba(210, 210, 210, .9)'	String	color for scroll picker container
panelBackground	dark: '#2D343D', light: '#99A6B5'	String	color for panel background
panelHeaderBorderColor	dark:'#99A6B5', light: '#2D343D'	String	color for panel header border
titleColor	dark:'#99A6B5', light: '#2D343D'	String	color for the scroll picker title
confirmButtonColor	'#FFDF22'	String	color for the confirm button text
cancelButtonColor	dark: '#99A6B5', light: '#2D343D'	String	color for the cancel button text
focusBorderColor	'#FFDF22'	String	color for the center focus rectangle
maskBackgroundColor	dark: 'rgb(45, 52, 61, .9)', light: 'rgb(200, 200, 200, .9)'	String	color for the mask background color
cancelText	Cancel	String	The text display on the cancel button
confirmText	Confirm	String	The text display on the confirm button

Tips

For some of the options you can set the value on the tag, eg:

<scroll-picker id="test2" title="select date"></scroll-picker>

also you can set the value to the attribute, eg:

const ele = document.querySelector("#test2");

setTimeout(() => {
  ele.title = "date picker";
}, 2000);

and you can set it in the options, eg:

const ele = document.querySelector("#test2");

setTimeout(() => {
  ele.options = {
    title: "date picker",
  };
}, 2000);

All the configration can be setted by the options, Or by setting on the attribute.
Only title, stopoverlaycancel can set on the tag

Functions

show(): trigger show the picker. In real use case the show function should only be called by scroll-picker itself
hide(): trigger hide the picker. In real use case this hide function should only be called by scroll-pciker itself.
destory(): this function is for user remove the scroll-picker from dom after it's not needed.