官方鏈接
- 原生 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
快速使用
- 普通數組格式-非聯動
<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 |
|
Object |
字段名映射，適用於字段名不匹配 id,value,childs 的數據格式 |
| triggerDisplayData |
true |
Boolean |
在點擊確認時，trigger 的 innerHtml 是否變為選擇的數據。 |
注：回調函數中返回的參數含義如下
- 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，完成初始化定位即可。
