原生 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>
评论
8条评论84745445 Lv.1
Chrome 86.0.4240.198
Windows 回复
不错不错,味道好极了
广东省广州市 电信
wjt246932 Lv.1
Chrome 86.0.4240.198
Windows 回复
中国 移动
腾讯视频 Lv.3
Chrome 94.0.4606.71
Windows 回复
甘肃省兰州市 电信
腾讯视频 Lv.3
Chrome 86.0.4240.198
Windows 7 x64 Edition 回复
看看
中国 移动
w770340211 Lv.3
Chrome 69.0.3947.100
Windows 回复
北京市 移动
有人我工 Lv.1 回复
来看看了
山东省烟台市 联通
vivianna Lv.1
Chrome 89.0.4389.90
Windows 回复
广东省汕尾市陆丰县 移动
玫瑰 Lv.1
Chrome 86.0.4240.198
Windows 回复
不错,支持一下
河南省南阳市 联通