移动端可滑动选择插件-mobileSelect.js

mobileSelect.js是一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等. 移动端可滑动选择插件-mobileSelect.js .navh1{font-size:22px;} .contain{width:100%;text-align:center;} .demo{width:200px;margin:0auto;} .demodiv{width:100%;height:40px;float:left;background:#f04124;border-radius:4px;margin-top:2px;color:#fff;line-height:40px;} 移动端可滑动选择插件-mobileSelect.js 单项选择 双项选择 多项选择 地区选择-级联 车型选择-级联 varweekdayArr=['周日','周一','周二','周三','周四','周五','周六']; vartimeArr=['08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00']; varnumArr=['1','2','3','4','5']; varUplinkData= [ {id:'1',value:'兰博基尼'}, { id:'2', value:'劳斯莱斯', childs:[ { id:'1', value:'曜影' }, { id:'2', value:'幻影', childs:[ { id:'1', value:'标准版' }, { id:'2', value:'加长版' }, { id:'3', value:'巅峰之旅' }, { id:'4', value:'流光熠世' }, { id:'5', value:'都会典藏版' } ] }, { id:'3', value:'古思特', childs:[ { id:'1', value:'加长版' }, { id:'2', value:'永恒之爱' }, { id:'3', value:'英骥' }, { id:'4', value:'阿尔卑斯典藏版' } ] }, { id:'4', value:'魅影', childs:[ { id:'1', value:'标准版' }, { id:'2', value:'BlackBadge' } ] } ] }, { id:'3', value:'宾利', childs:[ { id:'1', value:'慕尚', childs:[ { id:'1', value:'标准版' }, { id:'2', value:'极致版' } ] }, { id:'2', value:'欧陆', childs:[ { id:'1', value:'尊贵版' }, { id:'2', value:'敞篷标准版' }, { id:'3', value:'敞篷尊贵版' } ] } ] }, { id:'4', value:'法拉利', childs:[ { id:'1', value:'LaFerrari' }, { id:'2', value:'法拉利488' }, { id:'3', value:'GTC4Lusso' } ] }, { id:'5', value:'玛莎拉蒂', childs:[ { id:'1', value:'总裁' }, { id:'2', value:'玛莎拉蒂GT' }, { id:'3', value:'Levante' } ] } ]; //---------------------------------------------------------- //更多参数详情可查看文档https://github.com/onlyhom/mobileSelect.js /** *参数说明 *@paramtrigger(必填参数)触发对象的id/class/tag *@paramwheels(必填参数)数据源,需要显示的数据 *@paramtitle控件标题 *@paramposition初始化定位 *@paramcallback选择成功后触发的回调函数，返回indexArr(选中的选项索引)、data(选中的数据) *@paramtransitionEnd每一次手势滑动结束后触发的回调函数,返回indexArr(当前选中的选项索引)、data(选中的数据) *@paramkeyMap字段名映射 */ /** *函数说明(实例化之后才可用) *@functionsetTitle()参数string设置控件的标题 *@functionupdateWheel()参数sliderIndex,data重新渲染指定的轮子(可用于先实例化，后通过ajax获取数据的场景) *@functionupdateWheels()参数data重新渲染所有轮子,仅限级联数据格式使用(可用于先实例化，后通过ajax获取数据的场景) *@functionlocatePosition()参数sliderIndex,posIndex传入位置数组，重定位轮子的位置 *@functionshow()参数无参唤起弹窗组件 *@functiongetValue()参数无参获取组件选择的值 */ varmobileSelect1=newMobileSelect({ trigger:'#trigger1', title:'单项选择', wheels:[ {data:weekdayArr} ], position:[2],//初始化定位打开时默认选中的哪个如果不填默认为0 transitionEnd:function(indexArr,data){ //console.log(data); }, callback:function(indexArr,data){ console.log(data); } }); varmobileSelect2=newMobileSelect({ trigger:'#trigger2', title:'双项选择', wheels:[ {data:weekdayArr}, {data:timeArr} ], position:[1,2], transitionEnd:function(indexArr,data){ //console.log(data); }, callback:function(indexArr,data){ console.log(data); } }); varmobileSelect3=newMobileSelect({ trigger:'#trigger3', title:'多项选择', wheels:[ {data:numArr}, {data:numArr}, {data:numArr}, {data:numArr}, {data:numArr} ], position:[0,1,0,1,0], transitionEnd:function(indexArr,data){ //console.log(data); }, callback:function(indexArr,data){ console.log(data); } }); varmobileSelect4=newMobileSelect({ 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:'西湖区'} ]} ], transitionEnd:function(indexArr,data){ //console.log(data); }, callback:function(indexArr,data){ console.log(data); } }); varmobileSelect5=newMobileSelect({ trigger:'#trigger5', title:'车型选择', wheels:[ {data:UplinkData} ], position:[2,0], transitionEnd:function(indexArr,data){ //console.log(data); }, callback:function(indexArr,data){ console.log(data); } }); 附件下载：链接：https://pan.baidu.com/s/1AvrIveJVO-2FlLsxYpii7g&shfl=sharepset提取码：y2mi