h5的select类似ios的选择器

在做移动混合开发,html中元素的select控件在android中不好看,要改成ios的风格,在网上找到了下面这个库,非常好用

相关资源

官方网站:http://zhoushengfe.com/iosselect/website/index.html
下载地址:https://github.com/zhoushengmufc/iosselect
相关博客:http://www.cnblogs.com/mufc-go/archive/2017/05/03/6801153.html

应用在apicloud中,不多说,上代码

1.引入相关文件:


<link rel="stylesheet" type="text/css" href="../css/iosSelect.css"/>
<script type="text/javascript" src="../script/iosSelect.js"></script>
<script type="text/javascript" src="../script/iscroll.js"></script>

2.html部分

<!-- 应该是用于初始化控件默认值的 -->
<input type="hidden" name="channelId" id="channelId" value="">
<div id="showChannel" style="height: 1.6rem;line-height:1.6rem;">请选择栏目</div>

3.JavaScript部分

//查询部分
var filter={
                "order": "sort ASC",
                "where":{"and":[{"parent_id":"-1"},{release_level:{"lte":key_user_level()}}]}
            }
        var client = new Resource(APICLOUD_ID, APICLOUD_KEY);
        var Model = client.Factory("channel");
        Model.query({
            filter:filter
        }, function(ret,err){
            if(err){
                //处理错误 err
                //alert("发生错误!"+JSON.stringify(err));
                key_showAjaxError(err);
            }else{
                //处理数据 ret
                //alert(JSON.stringify(ret));
                //编译模板
                var dataArray=[];
                for(var i=0;i<ret.length;i++){
                    dataArray[i]={"id":ret[i].id,"value":ret[i].name};
                }
                initChannel(dataArray);
            }
            common_hide_loading();
        })
//初始化控件
function initChannel(data){
        var showChannelDom = document.querySelector('#showChannel');
        var channelIdDom = document.querySelector('#channelId');
        showChannelDom.addEventListener('click', function () {
        var bankId = showChannelDom.dataset['id'];
        var bankName = showChannelDom.dataset['value'];
        var bankSelect = new IosSelect(1, 
                [data],
                {
                    container: '.container',
                    title: '请选择栏目',
                    itemHeight: 50,
                    itemShowCount: 3,
                    oneLevelId: bankId,
                    callback: function (selectOneObj) {
                        channelIdDom.value = selectOneObj.id;
                        showChannelDom.innerHTML = selectOneObj.value;
                        showChannelDom.dataset['id'] = selectOneObj.id;
                        showChannelDom.dataset['value'] = selectOneObj.value;
                    }
            });
        });
    }

原文出处:/show_1C7FFFzLUp6.html