原生 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>
评论
17条评论need login Lv.1 Chrome 119.0.6045.160 Windows 回复
感谢楼主,好人一生平安
山东省淄博市 电信
大发发大发发 Lv.1 Chrome 86.0.4240.198 Windows 回复
大发发
中国 移动
太阳风 Lv.1 Firefox 115.0 Windows 7 x64 Edition 回复
一直在学习
河南省南阳市 电信
超规格 Lv.1 Chrome 79.0.3945.79 Windows 7 x64 Edition 回复
我看看呢
湖北省十堰市 电信
怪兽 Lv.1 Chrome 113.0.0.0 Windows 回复
股份大股东是VS
陕西省榆林市米脂县 电信
海纳百川 Lv.1 Chrome 109.0.0.0 Windows 回复
手术室
新疆哈密地区 电信
明了 Lv.1 Chrome 86.0.4240.198 Windows 回复
正是需要的,求下载
重庆市云阳县 电信
joannefal Lv.1 Chrome 86.0.4240.198 Windows 回复
㞏福安后方晚饭发拉横幅啊
澳大利亚
高山流水 Lv.1 Chrome 86.0.4240.198 Windows 回复
新人报道学习一下
山东省济南市 移动
智云 Lv.1 Chrome 86.0.4240.198 Windows 回复
感谢楼主,好人一生平安
广东省韶关市 移动