Mobile Select 移动端滚动选择器
- 原生 js 移动端选择控件,不依赖任何库
- 可传入普通数组或者 json 数组
- 可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选择
- 自动识别是否级联
- 提供回调函数 onChange() 返回当前选择索引位置、以及选择的数据
- 每次手势滑动结束后,也提供一个回调函数 onTransitionEnd() 返回当前选择索引位置、以及选择的数据
- 能够在已经实例化控件后,提供 update 函数再次渲染,可用于异步获取数据或点击交互后需要改变所选数据的场景
- 提供initValue支持回显场景
<link rel="stylesheet" href="css/mobileSelect.css" media="all" /> <script src="js/mobileSelect.js"></script> <script> var 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:'分类二', childs:[ {id:'1',value:'嗯嗯'}, {id:'2',value:'嗯嗯'}, {id:'3',value:'让人'}, {id:'4',value:'特'}, {id:'5',value:'尔特'} ] }, {id:'3',value:'分类三'}, {id:'4',value:'分类4'}, {id:'5',value:'分类5'}, {id:'6',value:'分类6'} ]} ], connector: " - ", transitionEnd:function(indexArr, data){ console.log(data); }, callback:function(indexArr, data){ console.log(JSON.stringify(data)); } }); </script>
黑蜘蛛