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: "5", value: "拱墅区" },
          { id: "6", value: "西湖区" },
        ],
      },
      {
        data: [
          { id: "1", value: "1000米" },
          { id: "2", value: "2000米" },
          { id: "3", value: "3000米" },
          { id: "4", value: "5000米" },
          { id: "5", value: "10000米" },
        ],
      },
    ],
    onChange: function (data, indexArr, msInstance) {
      console.log(data);
    },
  });
</script>

效果图：

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

③json 格式-联动

<div id="trigger3"></div>

<script type="text/javascript">
  let mobileSelect3 = new MobileSelect({
    trigger: "#trigger3",
    title: "地区选择-联动",
    wheels: [
      {
        data: [
          {
            id: "1",
            value: "附近",
            childs: [
              { id: "1", value: "1000米" },
              { id: "2", value: "2000米" },
              { id: "3", value: "3000米" },
              { id: "4", value: "5000米" },
              { id: "5", value: "10000米" },
            ],
          },
          { id: "2", value: "上城区" },
          { id: "3", value: "下城区" },
          { id: "4", value: "江干区" },
          { id: "5", value: "拱墅区" },
          { id: "6", value: "西湖区" },
        ],
      },
    ],
    initValue: "附近 2000米", // 初始化值
    onChange: function (data, indexArr, msInstance) {
      console.log(data);
    },
  });
</script>

效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3QHJPIoE-1663310639818)(https://raw.githubusercontent.com/onlyhom/img-folder/master/gif/%E7%BA%A7%E8%81%94.gif)]

④在 react、vue 中使用

在React中的基本使用

import { useState, useRef, useEffect } from "react";
import MobileSelect from "mobile-select";

export default function MsComponent(props) {
  const tirggerRef = useRef(null);
  const [selectedVal, setSelectedVal] = useState('');
  let msInstance = null;
  useEffect(() => {
    if(!msInstance){
      msInstance = new MobileSelect({
          wheels: [
            { data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"] },
          ],
          trigger: tirggerRef.current,
          triggerDisplayValue: false, // 如果不想覆盖trigger内的html 这里需要设置为false
          onChange: (data) => {
            setSelectedVal(JSON.stringify(data));
          },
        });
    }
    return () => {
      msInstance?.destroy();
      msInstance = null;
    };
  }, []);
  return (
    <div>
      <div className="ms-default-trigger" ref={ tirggerRef }>
        <div className="your-classname">请输入</div>
      </div>
    </div>
  );
}

在Vue中的基本使用

<template>
  <div>
    <div ref="tirggerRef">
      <div class="your-classname">{{ selectedVal || "请选择" }}</div>
    </div>
  </div>
</template>

<script>
  import MobileSelect from "mobile-select";
  export default {
    name: "mobile-select",
    data: () => ({
      msInstance: null,
      selectedVal: "",
    }),
    mounted() {
      this.msInstance = new MobileSelect({
        trigger: this.$refs.tirggerRef,
        wheels: [
          { data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"] },
        ],
        triggerDisplayValue: false, // 如果不想覆盖trigger内的html 这里需要设置为false
        onChange: (data) => {
          this.selectedVal = JSON.stringify(data);
        },
      });
    },
    unmounted() {
      this.msInstance.destroy(); // 销毁组件实例
    },
  };
</script>

⑤ 数据字段名映射

<div id="trigger5"></div>

<script type="text/javascript">
  /**
   * 假如你的数据的字段名为id,title,children
   * 与mobileSelect的id,value,childs字段名不匹配
   * 可以用keyMap属性进行字段名映射
   */
  let mobileSelect5 = new MobileSelect({
    trigger: "#trigger5",
    title: "数据字段名映射",
    wheels: [
      {
        data: [
          {
            id: "1",
            title: "A",
            children: [
              { id: "A1", title: "A-a" },
              { id: "A2", title: "A-b" },
              { id: "A3", title: "A-c" },
            ],
          },
          {
            id: "1",
            title: "B",
            children: [
              { id: "B1", title: "B-a" },
              { id: "B2", title: "B-b" },
              { id: "B3", title: "B-c" },
            ],
          },
        ],
      },
    ],
    keyMap: {
      id: "id",
      value: "title",
      childs: "children",
    },
    onChange: function (data) {
      console.log(data);
    },
  });
</script>

配置参数

实例方法：

注：功能函数中需要传递的参数含义如下

• sliderIndex 代表的是要修改的轮子的索引
• posIndex 代表位置索引

① 功能函数 demo：

<div id="day"></div>

<script type="text/javascript">
let mySelect = new MobileSelect({
    trigger: '#day',
    wheels: [
        {data:['周日','周一','周二','周三','周四','周五','周六']},
        {data:['08:00','09:00','10:00','11:00','12:00','13:00','14:00']}
    ],
    initValue: "周一 09:00",
    colWidth: [1, 2] // 初始化列宽度设置，数字代表每列宽度比例
});

//----------------------------------------------
// 实例化之后，对实例用功能函数操作 

/** 设置控件的标题 */
mySelect.setTitle('啦啦啦(๑•̀ㅁ•́ฅ)');

/** 更新第0个轮子的数据，数据变为英文的星期几 */
mySelect.updateWheel(0,['sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']);

/** 重新定位第1个轮子的位置，将第1个轮子的第0个数据改为当前选中。*/
mySelect.locatePosition(1,0);

/** 销毁组件 */
mySelect.destroy();
</script>

基础实例 → 功能函数操作后

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

②ajax 异步填充数据 demo

<!-- ************ 非级联格式 ************ -->

<div id="trigger6"></div>

<script type="text/javascript">
    let mobileSelect6 = new MobileSelect({
        trigger: '#trigger6',
        title: 'ajax填充数据-非级联',
        wheels: [
                    {data:[
                        {id:'1',value:'请选择地区'},
                    ]},
                    {data:[
                        {id:'1',value:'请选择距离'},
                    ]}
                ],
        onChange:function(data, indexArr){
            console.log(data);
        }
    });

    $.ajax({
        type: "POST",
        url: "xxxx",
        data: {},
        dataType: "json",
        success: function(res){
            //这里假设获取到的res.data.area为：
            // [
            //     {id:'1',value:'附近'},
            //     {id:'2',value:'福田区'},
            //     {id:'3',value:'罗湖区'},
            //     {id:'4',value:'南山区'}
            // ]

            //这里假设获取到的res.data.distance为：
            // [
            //     {id:'1',value:'200米'},
            //     {id:'2',value:'300米'},
            //     {id:'3',value:'400米'}
            // ]
            mobileSelect6.updateWheel(0, res.data.area); // 更改第0个轮子
            mobileSelect6.updateWheel(1, res.data.distance); // 更改第1个轮子
        }
    });
</script>


<!-- ************ 级联格式 ************ -->

<div id="trigger7"></div>

<script type="text/javascript">
    let mobileSelect7 = new MobileSelect({
        trigger: '#trigger7',
        title: 'ajax填充数据-级联',
        wheels: [
                    {data:[
                        {
                            id:'1',
                            value:'',
                            childs:[
                                {id:'A1',value:''},
                            ]
                        }
                    ]}
                ],
        callback:function(indexArr, data){
            console.log(data);
        }
    });

    $.ajax({
        type: "POST",
        url: "xxxx",
        data: {},
        dataType: "json",
        success: function(res){
            //这里假设获取到的res.data为：
            // [{
            //     id:'1',
            //     value:'更新后数据',
            //     childs:[
            //         {id:'A1',value:'apple'},
            //         {id:'A2',value:'banana'},
            //         {id:'A3',value:'orange'}
            //     ]
            // }]
            mobileSelect7.updateWheels(res.data);
        }
    });
</script>