原生 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 111.0.0.0
Windows 回复
河南省郑州市 电信
18045757615 Lv.1
Chrome 108.0.5359.95
Windows 7 x64 Edition 回复
感谢楼主
,好人一生平安
云南省昭通市 联通
1 Lv.1
Chrome 111.0.0.0
Windows 回复
很棒!
河南省驻马店市 联通
dadad Lv.1
Chrome 109.0.0.0
Windows 回复
丢你鸽嘿
广东省佛山市南海区 联通
2546124371 Lv.1
Internet Explorer
iPhone iOS 16.3 回复
666
广西玉林市 电信
67575 Lv.1
Chrome 87.0.4280.141
Android 13 回复
收拾书包睡吧睡吧睡吧睡吧
广西 联通
a Lv.1
Firefox 111.0
Windows 7 x64 Edition 回复
阿猪66
河南省郑州市 联通
优游卒岁 Lv.1
Chrome 101.0.4951.74
Android 13 回复
你好你好
广西河池市 联通
dhrt Lv.1
Chrome 110.0.0.0
Windows 回复
感谢楼主表情,好人一生平安感谢楼主表情,好人一生平安感谢楼主表情,好人一生平安
湖北省宜昌市 联通
yifei Lv.1
Chrome 110.0.0.0
Windows 回复
河南省郑州市 联通