最近使用mobileSelect還挺頻繁的，遂把文檔放這裡友善自己日後查閱。
特性
- 原生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 | 資料源,需要顯示的資料 | |
| callback | function(indexArr, data){} | function | 選擇成功後觸發的回調函數，傳回indexArr、data |
| transitionEnd | 每一次手勢滑動結束後觸發的回調函數,傳回indexArr、data | ||
| cancel | 傳回的是indexArr和data是上一次點選确認按鈕時的值 | ||
| onShow | function(e){} | 顯示控件後觸發的回調函數, 傳回參數為對象本身 | |
| onHide | 隐藏控件後觸發的回調函數, 傳回參數為對象本身 | ||
| title | '' | 控件标題 | |
| position | [0,0,0,…] | 初始化定位 | |
| connector | ' ' | 多個輪子時，多個值中間的連接配接符，預設是空格 | |
| ensureBtnText | '确認' | 确認按鈕的文本内容 | |
| cancelBtnText | '取消' | 取消按鈕的文本内容 | |
| ensureBtnColor | '#1e83d3' | 确認按鈕的文本顔色 | |
| cancelBtnColor | '#666666' | 取消按鈕的文本顔色 | |
| titleColor | '#000000' | 控件标題的文本顔色 | |
| titleBgColor | '#ffffff' | 控件标題的背景顔色 | |
| textColor | 輪子内文本的顔色 | ||
| bgColor | 輪子背景顔色 | ||
| maskOpacity | 0.7 | Number | 遮罩透明度 |
| keyMap | {id:'id', value:'value', childs:'childs'} | Object | 字段名映射，适用于字段名不比對id,value,childs的資料格式 |
| triggerDisplayData | true | Boolean | 在點選确認時，trigger的innerHtml是否變為選擇的資料。 （如果trigger裡面還有其他元素，則可以設定為false；如果需要在别的地方顯示資料，則可用callback傳回的資料自行拼接） |
注：回調函數中傳回的參數含義如下
- indexArr是目前選中的索引數組 如[0,0,1] 代表有三個輪子 選中的資料是第一個輪子的第0個資料、第二個輪子的第0個資料、第三個輪子的第1個資料
- data是目前選中的json資料 如[{id:'1',value:'hello'},{id:'2',value:'world'}]
功能函數：
| 函數名 | ||
|---|---|---|
| show() | 無參 | 手動顯示彈窗元件 |
| hide() | 手動隐藏彈窗元件 | |
| setTitle() | string | 設定控件的标題 |
| locatePosition() | sliderIndex, posIndex | 傳入位置數組，重新定位輪子選中的位置 |
| updateWheel() | sliderIndex, data | 重新渲染指定的輪子 |
| updateWheels() | data | 重新渲染所有輪子(僅限級聯資料格式使用) |
| getValue() | 擷取元件選擇的值 |
注：功能函數中需要傳遞的參數含義如下
- sliderIndex 代表的是要修改的輪子的索引
- posIndex 代表位置索引
①功能函數demo：
<div id="day"></div>var mySelect = new MobileSelect({
trigger: '#day',
wheels: [
{data:['周日','周一','周二','周三','周四','周五','周六']},
{data:['08:00','09:00','10:00','11:00','12:00','13:00','14:00']}
],
position:[1,1] //初始化定位 兩個輪子都選中在索引1的選項
});
//----------------------------------------------
//進行基礎的執行個體化之後，對執行個體用功能函數操作
// mySelect.setTitle('啦啦啦(๑•̀ㅁ•́ฅ)');
// 設定控件的标題
// mySelect.updateWheel(0,['sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']);
// 更新第0個輪子的資料，資料變為英文的星期幾
// mySelect.locatePosition(1,0);
// 重新定位第1個輪子的位置，将第1個輪子的第0個資料改為目前選中。
// (第1個輪子是指右邊的輪子，左邊的輪子是第0個)複制代碼 基礎執行個體 → 功能函數操作後
②ajax異步填充資料demo
<!-- ************ 非級聯格式 ************ --><div id="trigger6"></div><script type="text/javascript">var mobileSelect6 = new MobileSelect({trigger: '#trigger6',title: 'ajax填充資料-非級聯',wheels: [
{data:[
{id:'1',value:'請選擇地區'},
]},
{data:[
{id:'1',value:'請選擇距離'},
]}
],callback:function(indexArr, data){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></script><!-- ************ 級聯格式 ************ --><div id="trigger7"></div><script type="text/javascript">var 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>複制代碼 如何回顯選擇的位置
callback回調函數裡有一個indexArr參數，它是一個數組，記錄着目前選中的位置：
把這個數組轉化為字元串之後，可以用隐藏域或者别的其他方式儲存下來，傳給背景。
下次打開頁面時，
MobileSelect執行個體化的時候，讀取這個字元串，再轉成數組，傳給position，完成初始化定位即可。
項目demo：
使用transitionEnd()、callback()、updateWheel()、locatePosition()函數實作如下功能：
- 選擇當天日期時，不得超過今天已過時辰。
- 選擇取車時間後，還車時間不得超過取車時間（包括日期和時間）。
更新日志
2017-04-20[更新]
鑒于input框在iphone上會出現光标
以及由input觸發的fixed布局在iphone6P/iphone7P的chrome中打開會出現下移現象
舍棄使用input标簽,改為由普通div觸發
選擇到的值寫進div的innerHTML裡
推薦用callback(indexArr, data)回調函數擷取選擇到的值
2017-07-27[修正]
修複issues中【li362692680】同學提出的
級聯選擇時無法初始定位二級選擇框的問題
同時修複init函數中傳入的position數組參數長度小于輪子個數無法移動的問題
2017-07-30[修正+更新]
修複issues中【leohgbs】同學提出的
1.更新沒有考慮到 資料是json的問題
2.更新之後，緩存的資料沒有更新，導緻callback資料源錯誤
更改變量名:jsonData → cascadeJsonData
更改方法名:updateWheels() → reRenderWheels()
updateWheel()方法不變
新增API：updateWheels(data) 用來在級聯資料格式下 更新整個資料源
2017-08-15[更新]
修複級聯狀态下-單點選失效
删除js檔案中大括号後面的注釋(在php環境中 會有js代碼失效的情況)
修複ios潛在bug
新增API show()
新增API getValue()
新增選項樣式選項(修改連接配接符/按鈕文本/按鈕顔色/背景顔色等)：
顔色支援如 #ff0000 rgba(0,255,255,0.5) orange 等格式
2017-09-07[更新]
增加資料字段映射功能
更新README
2017-10-17[更新]
增加 cancel 回調函數
2017-12-12[更新]
删除 cancel 回調函數
感謝【ngdly】同學:
增加 onshow 回調函數
增加 onhide 回調函數
增加 show()
增加 hide()
2018-01-28[優化]
感謝【aaalog】同學的建議
改寫監聽單擊事件的方法
為了修複單擊事件時，transitionEnd會被觸發兩次的情況：
删除了addListenerLi()、singleClick()内部方法，
直接在touchend事件做出單擊判斷。