[onlyhom/mobile-select](https://github.com/onlyhom/mobile-select) ``` <div id="trigger1" style="display: block;">單項選擇</div> <script type="text/javascript"> var weekdayArr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]; /** * 參數說明 * @param trigger(必填參數) 觸發對象的id/class/tag * @param wheels(必填參數) 數據源,需要顯示的數據 * @param title 控件標題 * @param position 初始化定位 * @param callback 選擇成功后觸發的回調函數，返回indexArr(選中的選項索引)、data(選中的數據) * @param transitionEnd 每一次手勢滑動結束后觸發的回調函數,返回indexArr(當前選中的選項索引)、data(選中的數據) * @param keyMap 字段名映射 */ /** * 函數說明(實例化之后才可用) * @function setTitle() 參數 string 設置控件的標題 * @function updateWheel() 參數 sliderIndex, data 重新渲染指定的輪子(可用于先實例化，后通過ajax獲取數據的場景) * @function updateWheels() 參數 data 重新渲染所有輪子,僅限級聯數據格式使用(可用于先實例化，后通過ajax獲取數據的場景) * @function locatePosition() 參數 sliderIndex, posIndex 傳入位置數組，重定位輪子的位置 * @function show() 參數 無參 喚起彈窗組件 * @function getValue() 參數 無參 獲取組件選擇的值 */ var mobileSelect1 = new MobileSelect({ trigger: "#trigger1", title: "單項選擇", wheels: [{ data: weekdayArr }], position: [2], //初始化定位 打開時默認選中的哪個 如果不填默認為0 transitionEnd: function (indexArr, data) { //console.log(data); }, callback: function (indexArr, data) { console.log(data); }, }); </script> ``` 一款多功能的移動端滾動選擇器，支持單選到多選、支持多級級聯、提供回調函數、提供 update 函數二次渲染、重定位函數、兼容 pc 端拖拽等等.. [English Docs](https://github.com/onlyhom/mobile-select) | 中文文檔 ## ?? 特性 - 原生 js 移動端選擇控件，不依賴任何庫 - 可傳入普通數組或者 json 數組 - 可根據傳入的參數長度，自動渲染出對應的列數，支持單項到多項選擇 - 自動識別是否級聯 - 提供回調函數 onChange() 返回當前選擇索引位置、以及選擇的數據 - 每次手勢滑動結束后，也提供一個回調函數 onTransitionEnd() 返回當前選擇索引位置、以及選擇的數據 - 能夠在已經實例化控件后，提供 update 函數再次渲染，可用于異步獲取數據或點擊交互后需要改變所選數據的場景 - 提供initValue支持回顯場景 ## ?? 安裝 #### 方式一 標簽引入： ```html <link rel="stylesheet" type="text/css" href="https://unpkg.com/mobile-select@latest/dist/style/mobile-select.css" /> <script type="text/javascript" src="https://unpkg.com/mobile-select@latest/dist/mobile-select.iife.min.js" ></script> ``` #### 方式二 npm / pnpm / yarn 引入： Using npm: ```shell npm install mobile-select ``` Using pnpm: ```shell pnpm add mobile-select ``` Using Yarn: ```shell yarn add mobile-select ``` 在你的js文件中 import: ```javascript import MobileSelect from "mobile-select"; ``` ## ?? 在線使用Demo <table align="center"> <tr> <td align="center" width="100"><strong>VanillaJS</strong> <br/> _{<a href="https://codesandbox.io/s/mobile-select-vanilla-l7gnb3" target="_blank">??Sandbox</a>} </td> <td align="center" width="100"><strong>Angular</strong> <br/> _{<a href="https://codesandbox.io/s/mobile-select-angular-esgkil" target="_blank">??Sandbox</a>} </td> <td align="center" width="100"><strong>React-ts</strong> <br/> _{<a href="https://codesandbox.io/s/mobile-select-react-ts-woc5f8" target="_blank">??Sandbox</a>} </td> <td align="center" width="100"><strong>Vue</strong> <br/> _{<a href="https://codesandbox.io/s/mobile-select-vue-el5o6r" target="_blank">??Sandbox</a>} </td> <td align="center" width="100"><strong>Svelte</strong> <br/> _{<a href="https://codesandbox.io/s/mobile-select-svelte-2m4wz2" target="_blank">??Sandbox</a>} </td> <td align="center" width="100"><strong>Solid</strong> <br/> _{<a href="https://codesandbox.io/s/mobile-select-solid-pcd560" target="_blank">??Sandbox</a>} </td> </tr> </table> [mobile-select demo (onlyhom.github.io)](https://onlyhom.github.io/mobile-select/demo.html) ## ??快速使用 ### **① 普通數組格式-單項選擇非聯動** ```html <div id="trigger1"></div> <script type="text/javascript"> let mobileSelect1 = new MobileSelect({ trigger: document.querySelector("#trigger1"), title: "單項選擇", wheels: [ { data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"] }, ], initValue: "周二", // 初始化值 }); </script> ```  ### **②json 格式-雙項選擇非聯動** ```html <div id="trigger2"></div> <script type="text/javascript"> let 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米" }, ], }, ], onChange: function (data, indexArr, msInstance) { console.log(data); }, }); </script> ```  >[danger]沒有聯動時左右都可以滑動選擇互不干擾 ``` <div id="trigger2">雙項選擇</div> const mobileSelect2 = new MobileSelect({ trigger: "#trigger2", title: "雙項選擇", wheels: [{ data: weekdayArr }, { data: timeArr }], position: [1, 2], colWidth: [2, 1], onTransitionEnd: function (data, indexArr, msInstance) { //console.log(data); }, onChange: function (data, indexArr, msInstance) { console.log(data); }, }); ```  ### **③json 格式-雙項選擇的聯動與非聯動組合** ```html <div id="trigger3"></div> <script type="text/javascript"> let 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: "西湖區" }, ], }, ], initValue: "附近 2000米", // 初始化值 onChange: function (data, indexArr, msInstance) { console.log(data); }, }); </script> ```   >[danger]距離與附近為父子聯動,選擇下面城區時由于距離沒有了聯動就不會出現 ## **多項選擇非聯動** ``` <div id="trigger3">多項選擇</div> const numArr = ["1", "2", "3", "4", "5"]; const mobileSelect3 = new MobileSelect({ trigger: "#trigger3", title: "多項選擇", wheels: [ { data: numArr }, { data: numArr }, { data: numArr }, { data: numArr }, { data: numArr }, ], position: [0, 1, 0, 1, 0], onTransitionEnd: function (data, indexArr, msInstance) { //console.log(data); }, onChange: function (data, indexArr, msInstance) { console.log(data); }, }); ```  ### **綜合** ``` <div id="trigger5">車型選擇-級聯</div> const mobileSelect4 = new MobileSelect({ trigger: "#trigger4", 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: "西湖區" }, ], }, ], connector: "-", initValue: "附近-3000米", onTransitionEnd: function (data, indexArr, msInstance) { //console.log(data); }, onChange: function (data, indexArr, msInstance) { console.log(data); }, }); const mobileSelect5 = new MobileSelect({ trigger: "#trigger5", title: "級聯數據", wheels: [{ data: UplinkData }], initValue: "勞斯萊斯 魅影 標準版", // scrollSpeed: 2, onTransitionEnd: function (data, indexArr, msInstance) { //console.log(data); }, onChange: function (data, indexArr, msInstance) { console.log(data); }, }); //動態設置 const mobileSelect5 = new MobileSelect({ trigger: "#trigger5", title: "級聯數據", wheels: [{ data: UplinkData }], initValue: "勞斯萊斯 魅影 標準版", // scrollSpeed: 2, onTransitionEnd: function (data, indexArr, msInstance) { //console.log(data); }, onChange: function (data, indexArr, msInstance) { console.log(data); }, }); ```  ### ④在 react、vue 中使用 ##### 在React中的基本使用 ```tsx import { useState, useRef, useEffect } from "react"; import MobileSelect from "mobile-select"; export default function MsComponent(props) { const tirggerRef = useRef(null); const [selectedVal, setSelectedVal] = useState(''); let msInstance = null; useEffect(() => { if(!msInstance){ msInstance = new MobileSelect({ wheels: [ { data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"] }, ], trigger: tirggerRef.current, triggerDisplayValue: false, // 如果不想覆蓋trigger內的html 這里需要設置為false onChange: (data) => { setSelectedVal(JSON.stringify(data)); }, }); } return () => { msInstance?.destroy(); msInstance = null; }; }, []); return ( <div> <div className="ms-default-trigger" ref={ tirggerRef }> <div className="your-classname">請輸入</div> </div> </div> ); } ``` ##### 在Vue中的基本使用 ```html <template> <div> <div ref="tirggerRef"> <div class="your-classname">{{ selectedVal || "請選擇" }}</div> </div> </div> </template> <script> import MobileSelect from "mobile-select"; export default { name: "mobile-select", data: () => ({ msInstance: null, selectedVal: "", }), mounted() { this.msInstance = new MobileSelect({ trigger: this.$refs.tirggerRef, wheels: [ { data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"] }, ], triggerDisplayValue: false, // 如果不想覆蓋trigger內的html 這里需要設置為false onChange: (data) => { this.selectedVal = JSON.stringify(data); }, }); }, unmounted() { this.msInstance.destroy(); // 銷毀組件實例 }, }; </script> ``` #### ⑤ 數據字段名映射 ```html <div id="trigger5"></div> <script type="text/javascript"> /** * 假如你的數據的字段名為id,title,children * 與mobileSelect的id,value,childs字段名不匹配 * 可以用keyMap屬性進行字段名映射 */ let 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", }, onChange: function (data) { console.log(data); }, }); </script> ``` ## 配置參數 | 選項 | 默認值 | 類型 | 版本 | 描述 | | --------------- | ------------------------------------------- | -------------------- | --------- | ---------------| | trigger | 必填參數 | String 或 HTMLElement| | DOM的選擇器字符串 或 HTMLElement元素 <br/>如：'#my-trigger' 或 document.querySelector('#my-trigger') | | wheels | 必填參數 | Array | | 選項數據源, 需要顯示的數據 | | onChange | function(data, indexArr, instance){} | function | ≥1.2.0 | 選擇成功后觸發的回調函數| | onTransitionEnd | function(data, indexArr, instance){} | function | ≥1.2.0 | 每一次手勢滑動結束后觸發的回調函數| | onCancel | function(data, indexArr, instance){} | function | |點擊取消的回調函數 返回的data和inderArr 是上一次點擊確認按鈕時的值 | | onShow | function(instance){} | function | |顯示控件后觸發的回調函數, 返回參數為對象本身 | | onHide | function(instance){} | function | | 隱藏控件后觸發的回調函數, 返回參數為對象本身 | | title | `''` | String | | 組件標題 | | connector | `' '` | String | | 多項選擇的值連接符號，默認是空格（例：如果設為'-', 那返回的多列數據則為'A-B') | | initValue | `'1 2'` | String | ≥1.2.0 | 初始化值, 一般使用在數據回顯的場景。<br/>(如果設置了connector, 那么initValue也需要用對應的connector符號連接) | | autoFocus | `false` | Boolean | ≥1.2.0 | 初始化后自動彈出選擇面板 | | position | [0,0,0,…] | Array | | 初始化定位 | | colWidth | [1,1,2,…] | Array | | 列寬度設置 | | 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 的數據格式 | | triggerDisplayValue | `true` | Boolean | ≥1.2.0 | 在點擊確認時，trigger 的 innerHtml 是否變為選擇的數據。<br>（如果 trigger 里面還有其他元素，不想覆蓋，則可以設置為 false；如果需要在別的地方顯示數據，則可用 'onChange()' 回調返回的數據自行拼接） | scrollSpeed | `1` | Number | ≥1.2.0 | 滑輪滾動的速度 | ## 實例方法： | 函數名 | 參數 | 版本 | 描述 | | ---------------- | ---------------------| ----| --------------- | | show() | 無參 | | 手動顯示彈窗組件 | | hide() | 無參 | | 手動隱藏彈窗組件 | | setTitle() | string | | 設置控件的標題 | | locatePosition() | sliderIndex, posIndex | | 傳入位置數組，重新定位輪子選中的位置 | | updateWheel() | sliderIndex, data | | 重新渲染指定的輪子 | | updateWheels() | data | | 重新渲染所有輪子(僅限級聯數據格式使用) | | getValue() | 無參 | | 獲取組件選擇的值 | | destroy() | 無參 | ≥1.2.0 | 銷毀組件實例 | #### 注：功能函數中需要傳遞的參數含義如下 - sliderIndex 代表的是要修改的輪子的索引 - posIndex 代表位置索引 #### ① 功能函數 demo： ```html <div id="day"></div> <script type="text/javascript"> let mySelect = new MobileSelect({ trigger: '#day', wheels: [ {data:['周日','周一','周二','周三','周四','周五','周六']}, {data:['08:00','09:00','10:00','11:00','12:00','13:00','14:00']} ], initValue: "周一 09:00", colWidth: [1, 2] // 初始化列寬度設置，數字代表每列寬度比例 }); //---------------------------------------------- // 實例化之后，對實例用功能函數操作 /** 設置控件的標題 */ mySelect.setTitle('啦啦啦(???????)'); /** 更新第0個輪子的數據，數據變為英文的星期幾 */ mySelect.updateWheel(0,['sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']); /** 重新定位第1個輪子的位置，將第1個輪子的第0個數據改為當前選中。*/ mySelect.locatePosition(1,0); /** 銷毀組件 */ mySelect.destroy(); </script> ``` 基礎實例 → 功能函數操作后   #### ②ajax 異步填充數據 demo ```html <!-- ************ 非級聯格式 ************ --> <div id="trigger6"></div> <script type="text/javascript"> let mobileSelect6 = new MobileSelect({ trigger: '#trigger6', title: 'ajax填充數據-非級聯', wheels: [ {data:[ {id:'1',value:'請選擇地區'}, ]}, {data:[ {id:'1',value:'請選擇距離'}, ]} ], onChange:function(data, indexArr){ 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> <!-- ************ 級聯格式 ************ --> <div id="trigger7"></div> <script type="text/javascript"> let 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> ``` ## 使用場景 Demo 使用 onTransitionEnd()、onChange()、updateWheel()、locatePosition()函數實現如下功能： - 選擇當天日期時，不得超過今天已過時辰。 - 選擇取車時間后，還車時間不得超過取車時間（包括日期和時間）。  ## ?? 許可證 [MIT LICENSE](https://github.com/onlyhom/mobileSelect.js/blob/master/LICENSE) Copyright (c) 2017-present, LIHONG OU(onlyhom)