第一次运用移动端插件mobile-select.js记录

1.最近做的一个移动端的活动页面，里面原型图上是有一个单选的下拉框，因为自己移动端经验不多吧，刚开始做，竟然直接使用的<select></select>这种原始的，但朋友看了之后，告诉我，你看手机端的，选择的，哪有见过这种直接用select的，想了一下，确实，然后就推荐这个mobile-select.js;

2.特性：

（1）原生js移动端控件，不依赖任何库

（2）可传入普通数组或json数组

（3）支持单项选择到多项选择

3.使用

（1）标签引入：

<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

在自己的文件中import：import MobileSelect from 'mobile-select'

（2）html中书写

<div id="trigger" class="gradeparent"></div>

可自己定义样式，这是我项目中写的

.gradeparent{

background:#FBFBFB url('../../static/images/downjt2.png') 3.1rem center no-repeat;

width: 3.35rem;

height: .44rem;

font-size: .14rem;

text-align: left;

padding-left: .44rem;

line-height: .44rem;

color: #C8CFDA;

overflow: hidden;

border: .01rem solid #E8EBEF;

border-radius: .06rem;

position:relative;

select{

-webkit-appearance:none;

-moz-appearance:none;

appearance:none;

background:transparent;

border:none;

padding-left:.44rem;

width: 3.35rem;

height:100%;

font-family: MicrosoftYaHei;

font-size: 14px;

color: #C8CFDA;

letter-spacing: -0.25px;

}

&:before{

content:'';

width:.16rem;

height:.16rem;

display:inline-block;

background:url('../../static/images/grade.png') no-repeat;

background-size: 100%;

position:absolute;

left: .14rem;

top: .14rem;

}

}

（3）js书写

单选：

注：gradelist是个数组['一年级','二年级','三年级',]或者[{id:'1',value:'一年级'}，{id:'3',value:'二年级'}，{id:'3',value:'三年级'}]

var mobileSelect4 = new MobileSelect({
                  trigger: "#trigger1",
                  title: "选择年级",
                  wheels: [
                      {data: gradelist}
                  ],
                  callback:function(indexArr, data){
                     console.log(data)
                  }
              });

双项、多项选择：

var mobileSelect4 = new MobileSelect({
                  trigger: "#trigger1",
                  title: "选择年级",
                  wheels: [
                      {data: gradelist},
                      {data: gradelist}

                  ],
                  callback:function(indexArr, data){
                     console.log(data)
                  }
              });

联动：

var mobileSelect4 = new MobileSelect({
                  trigger: "#trigger1",
                  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:'上城区',
                                 childs:[
                                           {id:'1',value:'上地'},
                                           {id:'2',value:'莲花池'},
                                           {id:'3',value:'菊花台'},
                                           {id:'4',value:'西北旺'},
                                           {id:'5',value:'东北旺'}
                                  ]
                               },
                               {
                                 id:'3',
                                 value:'下城区',
                                 childs:[
                                           {id:'1',value:'上地'},
                                           {id:'2',value:'苏州街'},
                                           {id:'3',value:'巴沟'},
                                           {id:'4',value:'火器营'},
                                           {id:'5',value:'车道沟'}
                                  ]
                                },
                             ]
                      }

                  ],
                  callback:function(indexArr, data){
                     console.log(data)
                  }
              });

4.参数、配置说明

（1）trigger：必填参数，无默认值（触发对象的id/class/tag）

（2）wheels：必填参数，无默认值（数据源，需要显示的数据）

（3）title：     控件标题

（4）position：默认值是0（初始化定位，打开时默认选中哪个）

（5）connector：默认值是空格（选中之后，呈现在手机端的多个值中间）

（6）callback：选择成功，点击确定之后，出发的函数function(indexArr,data){}

（7）transitionEnd：每次手势滑动结束后，出发的回调函数function(indexArr,data){}

（8）ensureBtntext：确认按钮的文本内容

（9）cancelBtnText：取消按钮的文本内容

（10）ensureBtnColor：确认按钮的文本颜色

（11）cancelBtnColor：取消按钮的文本颜色

（12）titleColor：控件标题的文本颜色

（13）titleBgColor：控件标题的背景颜色

（14）keyMap：{id:'id',value:'value',childs:'childs'}（字段名映射，当后台返回的数据格式，字段名字与插件不一样时，可以替换）

（15）triggerDisplayData：bollean ，默认为true（点击确认时，trigger的innerHtml是否变为选择的数据，如果你的trigger还有其他元素，不想把选择的数据，直接显示到trigger元素中，可以设置为false，需要在背的地方显示选中的数据，可以再callback里面自行拼接）

功能函数：

（1）setTitle（）：设置控件的标题

mySelect.setTitle('啦啦啦(๑•̀ㅁ•́ฅ)'); 

（2）locatePosition（sliderIndex，posIndex）：传入位置数组，重新定义轮子选中的位置

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

（3）updateWheel（）：重新渲染指定的轮子

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

（4）updateWheels（）：重新渲染所有轮子（仅限级联数据格式使用）

（5）show（）：唤起弹窗事件

（6）getValue（）：获取组件选择的值

注：这些功能函数很多用于ajax异步填充数据

 

 

转载于:https://my.oschina.net/u/3950671/blog/1933156