原生 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>
评论
172条评论我胖虎怕过谁 Lv.1
Chrome 86.0.4240.198
Windows 7 x64 Edition 回复
66666撒旦
河南省开封市 联通
2837297114 Lv.1
Android Webkit 4.0
Android 12 回复
6667
河南省郑州市 联通
Lv.1 回复
江苏省 移动
爱是冰冷的剑 Lv.1 回复
内蒙古赤峰市 电信
石家庄市 Lv.1
Chrome 69.0.3947.100
Windows 7 x64 Edition 回复
中国 移动
nicemoe Lv.1
Chrome 101.0.0.0
Windows 回复
广东省深圳市 电信
lining1585 Lv.1
Chrome 86.0.4240.198
Windows 回复
23231123
加拿大
蜜桃主 Lv.1
Sogou Explorer
Windows 回复
感谢楼主
,好人一生平安
山东省 联通
Sunny Lv.1
Chrome 80.0.3987.163
Windows 回复
看看
辽宁省 移动
太阳的背面 Lv.1
Chrome 101.0.4951.64
Windows 回复
来啦二1111
上海市徐汇区 联通漕河泾数据中心