首页 > > 网页制作 > css >

地区picker 各选择器，优劣分析

2018-11-28 08:50:56来源：博客园阅读 ()

移动端选择器picker有很多，各大ui组件都有自己的picker，比如light7，HUI，MUI，jqueryUI等等。但是，我发现他们都有各种各样的问题。这次的地区选择，需要地区的省份+市+经纬度，还要设置第一次点开的时候是特定城市。

demo：链接：https://pan.baidu.com/s/1n5ApFB4elywxD_QekhSW6Q 密码：cd2k

分析一波问题：

先说light7，它的picker是最low的，data里只有选项，木有ID，更木有其他内容。双联三联picker的时候想特定一个选项就更别说了，在弹窗里用的时候更是恶心，曾经改过它的源代码，想让它更实用一点，但只能用在普通选择，这次的需求直接把它pass掉了。

HUI：它的picker比light7好一点点，data里面可以放value和text。但是在双联的时候并不能设置特定城市，而且在快速滚动的时候，迅速点确定，会出现结果是北京而内容却定格在天津的情况。

MUI：emmmm，这是一个最不要脸的框架：“最接近原生APP的前端框架”，以前拿它做过几个P2P的APP，是挺简单的，但是有很多奇怪的问题，比如和jquery各种冲突什么的，这里就不多说了。它的picker，只能设置单联的特定城市，在快速滚动点确定的时候比HUI还要不堪，会出现广西壮族自治区——南京......而且治不好。。。

最后选择了mobile Picker：这个东西暂时没发现类似上面那些框架的毛病，起码在这次的需求是完全满足的。

<!doctype html>
<html lang="zh-cn">

    <head>
        <meta charset="UTF-8">
        <title>mobileSelect Demo</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="wap-font-scale" content="no">
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
        <meta name="keywords" content="">
        <meta name="description" content="">

        <!-- 引入样式和js文件 -->
        <link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
        <script src="js/mobileSelect.js" type="text/javascript"></script>
        <script src="js/city.data.js"></script>

    </head>

    <body>

        <div class="demo">
            <div id="trigger4">地区选择-级联</div>
        </div>

        <script type="text/javascript">
            var mobileSelect4 = new MobileSelect({
                trigger: '#trigger4',
                title: '地区选择',
                wheels: [{
                    data: cityData
                }],
                position: [32, 0],  //设定默认选项
                transitionEnd: function(indexArr, data) {
                    console.log(data);
                },
                callback: function(indexArr, data) {
                    console.log(data);
                }
            });

            var kk = 0
            var ss = 0
            for(var k = 0; k < cityData.length; k++) {
                kk++
                var childs = cityData[k].childs;
                for(var m = 0; m < childs.length; m++) {
                    ss++
                }
            }
            console.log("省份：" + kk)
            console.log("城市：" + ss)
        </script>

    </body>

</html>