第一次運用移動端插件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異步填充數據