[原创首发] js手机移动端选择插件 mobile-select

mobile-select

这是一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等…

最新版本下载地址[2022-08更新]：
https://github.com/onlyhom/mobile-select
（写给不熟悉github的同学：点击页面右侧的绿色按钮【Clone or download】即可下载）

（遇到bug先不要着急，请先确认是否在github中下载的最新版本，有一些别的网站也收录了这个插件，但是版本滞后，一些新特性还没有更新，以及存留着一些老bug。）

🎨 特性

• 原生 js 移动端选择控件，不依赖任何库
• 可传入普通数组或者 json 数组
• 可根据传入的参数长度，自动渲染出对应的列数，支持单项到多项选择
• 自动识别是否级联
• 提供回调函数 onChange() 返回当前选择索引位置、以及选择的数据
• 每次手势滑动结束后，也提供一个回调函数 onTransitionEnd() 返回当前选择索引位置、以及选择的数据
• 能够在已经实例化控件后，提供 update 函数再次渲染，可用于异步获取数据或点击交互后需要改变所选数据的场景
• 提供initValue支持回显场景

📺 演示

手机扫描二维码预览：

动态图预览：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tvLBZ0dj-1663310639816)(https://github.com/onlyhom/img-folder/blob/master/gif/ms_preview_all.gif?raw=true)]

🗂 包结构

dist/
├── mobile-select.umd.js      (UMD, default)
├── mobile-select.esm.js      (ECMAScript Module)
├── mobile-select.iife.js     (Immediately-invoked Function Expression)
├── mobile-select.iife.min.js (Immediately-invoked Function Expression, compressed)
├── mobile-select.d.ts        (TypeScript Declaration File)
├── style/
  ├── mobile-select.css
  └── mobile-select.less

🥤 安装

方式一 标签引入：

<link rel="stylesheet" type="text/css" href="https://unpkg.com/mobile-select@latest/dist/style/mobile-select.css" />
<script type="text/javascript" src="https://unpkg.com/mobile-select@latest/dist/mobile-select.iife.min.js" ></script>

CDN Path：

https://unpkg.com/mobile-select@latest/dist/

https://cdn.jsdelivr.net/npm/mobile-select@latest/dist/

方式二 npm / pnpm / yarn 引入：

Using npm:

npm install mobile-select

Using pnpm:

pnpm add mobile-select

Using Yarn:

yarn add mobile-select

在你的js文件中 import:

import MobileSelect from "mobile-select";

🧩 在线使用Demo

VanillaJS 📦Sandbox

Angular 📦Sandbox

React-ts 📦Sandbox

Vue 📦Sandbox

Svelte 📦Sandbox

Solid 📦Sandbox

📗快速使用

① 普通数组格式-非联动

<div id="trigger1"></div>

<script type="text/javascript">
  let mobileSelect1 = new MobileSelect({
     
     
    trigger: document.querySelector("#trigger1"),
    title: "单项选择",
    wheels: [
      {
     
      data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"] },
    ],
    initValue: "周二", // 初始化值
  });
</script>

②json 格式-非联动

<div id="trigger2"></div>

<script type="text/javascript">
  let mobileSelect2 = new MobileSelect({
     
     
    trigger: "#trigger2",
    title: "地区选择",
    wheels: [
      {
     
     
        data: [
          {
     
      id: "1", value: "附近" },
          {
     
      id: "2", value: "上城区" },
          {
     
      id: "3", value: "下城区" },
          {
     
      id: "4", value: "江干区" },
          {
     
      id