mobileSelect.js
一款多功能的移動端滾動選擇器，支持單選到多選、支持多級級聯、提供自定義回調函數、提供update函數二次渲染、重定位函數、兼容pc端拖拽等等..
特性
- 原生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 | function(indexArr, data){} | function | 每一次手勢滑動結束后觸發的回調函數,返回indexArr、data |
| cancel | function(indexArr, data){} | function | 返回的是indexArr和data是上一次點擊確認按鈕時的值 |
| onShow | function(e){} | function | 顯示控件后觸發的回調函數, 返回參數為對象本身 |
| onHide | function(e){} | function | 隱藏控件后觸發的回調函數, 返回參數為對象本身 |
| title | '' |
String | 控件標題 |
| position | [0,0,0,…] | Array | 初始化定位 |
| connector | ' ' |
String | 多個輪子時，多個值中間的連接符，默認是空格 |
| ensureBtnText | '確認' |
String | 確認按鈕的文本內容 |
| cancelBtnText | '取消' |
String | 取消按鈕的文本內容 |
| ensureBtnColor | '#1e83d3' |
String | 確認按鈕的文本顏色 |
| cancelBtnColor | '#666666' |
String | 取消按鈕的文本顏色 |
| titleColor | '#000000' |
String | 控件標題的文本顏色 |
| titleBgColor | '#ffffff' |
String | 控件標題的背景顏色 |
| textColor | '#000000' |
String | 輪子內文本的顏色 |
| bgColor | '#ffffff' |
String | 輪子背景顏色 |
| 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: