这是一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等.
mobileSelect代码
简单粗暴:看演示
方式一 标签引入：
<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
如何使用:
1.普通数组格式-非联动
<div id="day"></div><!--Don't forget this trigger in your page-->
<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
trigger: '#day',
title: '单项选择',
wheels: [
{data:['周日','周一','周二','周三','周四','周五','周六']}
],
position:[2] //Initialize positioning
});
</script>
2.json格式-非联动
<div id="area"></div>
<script type="text/javascript">
var mobileSelect2 = new MobileSelect({
trigger: '#area',
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); //Returns the selected json data
}
});
</script>
3.json格式-联动
<div id="area2"></div>
<script type="text/javascript">
var mobileSelect3 = new MobileSelect({
trigger: '#area2',
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); //Returns the selected json data
}
});
</script>
异步填充数据
<!-- ************ Non-cascade Format ************ -->
<div id="trigger4"></div>
<script type="text/javascript">
var mobileSelect4 = new MobileSelect({
trigger: '#trigger4',
title: 'ajax fill data - non-cascade',
wheels: [
{data:[
{id:'1',value:'choose area'},
]},
{data:[
{id:'1',value:'choose distance'},
]}
],
callback:function(indexArr, data){
console.log(data);
}
});
$.ajax({
type: "POST",
url: "xxxx",
data: {},
dataType: "json",
success: function(res){
//Assume that the obtained res.data.area is：
// [
// {id:'1',value:'area1'},
// {id:'2',value:'area2'},
// {id:'3',value:'area3'},
// {id:'4',value:'area4'}
// ]
//Assume that the obtained res.data.distance is：
// [
// {id:'1',value:'200 metres'},
// {id:'2',value:'300 metres'},
// {id:'3',value:'400 metres'}
// ]
mobileSelect4.updateWheel(0, res.data.area); //Update the 0th wheel
mobileSelect4.updateWheel(1, res.data.distance); //Update the 1th wheel
}
});
</script>
</script>
<!-- ************ Cascade Format ************ -->
<div id="trigger4"></div>
<script type="text/javascript">
var mobileSelect4 = new MobileSelect({
trigger: '#trigger4',
title: 'ajax fill data - cascade',
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){
//Assume that the obtained res.data is：
// [{
// id:'1',
// value:'after update',
// childs:[
// {id:'A1',value:'apple'},
// {id:'A2',value:'banana'},
// {id:'A3',value:'orange'}
// ]
// }]
mobileSelect4.updateWheels(res.data);
}
});
</script>
如何在vue cli中使用
npm install mobile-select -D
<template>
<div>
<div id="trigger5">vue-cli-demo</div>
</div>
</template>
<script>
import MobileSelect from 'mobile-select'
export default {
mounted() {
var mobileSelect5 = new MobileSelect({
trigger: "#trigger5",
title: "vue-cli-demo",
wheels: [
{data: ["周日","周一","周二","周三","周四","周五","周六"]}
],
callback:function(indexArr, data){
console.log(data);
}
});
}
}
</script>
JSON格式-数据字段映射
<div id="trigger6"></div>
<script type="text/javascript">
// If your data field is named id, title, children
// does not match the id, value, childs field name of mobileSelect
// You can use the keyMap property for field name mapping
var mobileSelect6 = new MobileSelect({
trigger: '#trigger6',
title: 'keyMap',
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>
网友评论