首页 > 特效插件 > 日期时间 >  mobileSelect.js移动端滚动选择器js插件正文

mobileSelect.js移动端滚动选择器js插件

特效介绍
    mobileSelect是一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等，效果模仿iphone端的select控件的选择效果，不依赖jQuery的纯js选择插件。

    最新版本下载地址[2017-09-21更新]： https://github.com/onlyhom/mobileSelect.js 
    我爱模板网下载地址：mobileSelect.js

特性
    原生js移动端选择控件，不依赖任何库
    可传入普通数组或者json数组
    可根据传入的参数长度，自动渲染出对应的列数，支持单项到多项选择
    自动识别是否级联
    选择成功后，提供自定义回调函数callback() 返回当前选择索引位置、以及选择的数据（数组/json）
    每次手势滑动结束后，也提供一个回调函数transitionEnd() 返回当前选择索引位置、以及选择的数据（数组/json）
    能够在已经实例化控件后，提供update函数，传其他参数再次渲染
    提供重定位函数

效果图：
使用方法
引入
方式一 标签引入： 
<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
<script src="js/mobileSelect.js" type="text/javascript"></script>
方式二 npm： 
npm install mobile-select -D
在你的js文件中import： 
import MobileSelect from 'mobile-select'
快速使用

①普通数组格式-非联动 
<div id="trigger1"></div> <!--页面中别漏了这个trigger-->

<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#trigger1', 
    title: '单项选择',  
    wheels: [
                {data:['周日','周一','周二','周三','周四','周五','周六']}
            ],
    position:[2] //初始化定位
});
</script>
②json格式-非联动 
<div id="trigger2"></div>

<script type="text/javascript">
var 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米'}
                ]}
            ],
    callback:function(indexArr, data){
        console.log(data); //返回选中的json数据
    } 
});
</script>
③json格式-联动 
<div id="trigger3"></div>

<script type="text/javascript">
  var 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:'西湖区'}
                  ]}
              ],
      position:[0,1],
      callback:function(indexArr, data){
          console.log(data); //返回选中的json数据
      } 
  });
  </script>
④在vue-cli中如何使用 
npm install mobile-select -D
<template>
    <div>
        <div id="trigger4">单项选择</div>
    </div>
</template>
<script>
    import MobileSelect from 'mobile-select'

    export default {
        mounted() {
            var mobileSelect4 = new MobileSelect({
                trigger: "#trigger4",
                title: "单项选择",
                wheels: [
                    {data: ["周日","周一","周二","周三","周四","周五","周六"]}
                ],
                callback:function(indexArr, data){
                    console.log(data);
                }
            });
        }
    }
</script>
⑤数据字段名映射 
<div id="trigger5"></div>

<script type="text/javascript">
    //假如你的数据的字段名为id,title,children
    //与mobileSelect的id,value,childs字段名不匹配
    //可以用keyMap属性进行字段名映射
    var 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'
        },         
        callback:function(indexArr, data){
            console.log(data);
        }
    });
</script>
参数
选项 默认值 类型 描述
trigger 必填参数 无默认值 String 触发对象的id/class/tag
wheels 必填参数 无默认值 Array 数据源,需要显示的数据
title '' String 控件标题
position [0,0,0,…] Array 初始化定位
connector ' ' String 多个轮子时，多个值中间的连接符，默认是空格
callback function(indexArr, data){} function 选择成功后触发的回调函数，返回indexArr、data
transitionEnd function(indexArr, data){} function 每一次手势滑动结束后触发的回调函数,返回indexArr、data
ensureBtnText '确认' String 确认按钮的文本内容
cancelBtnText '取消' String 取消按钮的文本内容
ensureBtnColor '#1e83d3' String 确认按钮的文本颜色
cancelBtnColor '#666666' String 取消按钮的文本颜色
titleColor '#000000' String 控件标题的文本颜色
titleBgColor '#ffffff' String 控件标题的背景颜色
textColor '#000000' String 轮子内文本的颜色
bgColor '#ffffff' String 轮子背景颜色
keyMap {id:'id', value:'value', childs:'childs'} Object 字段名映射，适用于字段名不匹配id,value,childs的数据格式
triggerDisplayData true Boolean 在点击确认时，trigger的innerHtml是否变为选择的数据。
（如果trigger里面还有其他元素，则可以设置为false；如果需要在别的地方显示数据，则可用callback返回的数据自行拼接）
TAGS: mobileSelect