Mobile Select 移动端滚动选择器

  • 内容
  • 相关
  • 原生 js 移动端选择控件,不依赖任何库
  • 可传入普通数组或者 json 数组
  • 可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选择
  • 自动识别是否级联
  • 提供回调函数 onChange() 返回当前选择索引位置、以及选择的数据
  • 每次手势滑动结束后,也提供一个回调函数 onTransitionEnd() 返回当前选择索引位置、以及选择的数据
  • 能够在已经实例化控件后,提供 update 函数再次渲染,可用于异步获取数据或点击交互后需要改变所选数据的场景
  • 提供initValue支持回显场景
  • QQ截图20230305124131.png
  •   <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>
黑蜘蛛

本文标签:

版权声明:若无特殊注明,本文皆为《ღ軍尐ღ》原创,转载请保留文章出处。

字数统计:本文共有 《969》 个。

本文链接:Mobile Select 移动端滚动选择器 - https://4dn.net/jsxx/262.html