这是一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..
简单粗暴:看演示
方式一 标签引入:
<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="trigger1"></div> <!--页面中别漏了这个trigger--> <script type="text/javascript"> var mobileSelect1 = new MobileSelect({ trigger: '#trigger1', title: '单项选择', wheels: [ {data:['周日','周一','周二','周三','周四','周五','周六']} ], position:[2] //初始化定位 }); </script>
2.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>
3.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>
gitHub地址:https://github.com/onlyhom/mobileSelect.js