移动端选择器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>

代码很简单，不懂的百度一下。

最后发表一下感言，以前喜欢用框架，项目做多了才发现没有一款框架是可以完美满足一切需求的，现在我做移动端项目已经不再用框架了，因为框架需要加载CSS和JS，就算再好的框架也是会占用带宽和用户浏览器性能的，不如提取出各框架中有用的属性或者模块，视项目而选择属性加载。

地区picker 各选择器，优劣分析的更多相关文章

  1. 微信小程序组件解读和分析：十二、picker滚动选择器

    picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期 ...

  2. picker多级选择器的使用————小程序

    picker多级选择器的使用----小程序 picker是选择器来着,既然选择了,就希望可以获取选择的数据. index.html <view>picker获取数据</view> ...

  3. spark和strom优劣分析

    对于Storm来说:1.建议在那种需要纯实时,不能忍受1秒以上延迟的场景下使用,比如实时金融系统,要求纯实时进行金融交易和分析2.此外,如果对于实时计算的功能中,要求可靠的事务机制和可靠性机制,即数据 ...

  4. 小程序地区时间自定义选择器 picker

    进入微信公众平台小程序开发文档搜索 picker 点进去后下滑,点击在开发者工具中预览即可

  5. CSS选择器性能分析

    写了几篇关于js的博客,也是关于性能的,现在,我觉得有必要那css来认真分析一下了.之前只是看别人这么写就跟着写,但是没有去研究这样写或者是不是正确的写法,性价比怎么样,渲染的效率好么!这些都没有考虑 ...

  6. 小白学习mysql之存储过程的优劣分析以及接入控制

    存储过程的优劣 存储过程是一组实现特定功能的SQL语句集合,存储过程一经编译便存储在了服务器上,可以通过调用存储过程的名字以及传入相应的参数来使用存储过程.要高层次的掌握存储过程,不能觉得依葫芦画瓢, ...

  7. 【picker】选择器组件说明

    picker从底部弹起选择器组件 组件细节: 1) 该组件有五种类型,分别是普通选择器.多列选择器.时间选择器.日期选择器.省市区选择器. 2) 组件内必需包裹内容,不然无法弹出选项 <!-- ...

  8. 微信小程序—picker(滚动选择器)

    官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...

  9. jquery选择器项目实例分析

    首先废话一句,jQuery选择器真心很强大!  在项目中遇到这么一个问题easyui的问题 如图所示,当前页面显示的是"原始报文查询"的页面,当时左侧导航栏却选中的是"重 ...

随机推荐

  1. Sublime Text3 实现在浏览器中以HTML格式预览md文件

    1.首先找到Package Control 打开Sublime Text3,找到菜单栏:Preferences → Package Control,没有找到Package Control,那么点击Pa ...

  2. Unity项目接入应用宝SDK实现截图功能

    Unity项目接入应用宝SDK实现截图功能 问题由来 点击应用宝悬浮窗 如图所示 左下角有一个截图按钮 需要解决那些问题 截图信息需要由游戏引擎提供 SDK获取截图信息为同步 但是Unity引擎没有提 ...

  3. Flask-SQLAlchemy插件

    一,初始化 两种方式: db = SQLAlchemy() def create_app(): app = Flask(__name__) db.init_app(app) return app ap ...

  4. div居中的几种方式

    摘自:https://www.cnblogs.com/ones/p/4362531.html DIV居中的几种方法   1. 1 body{ 2 text-align:center; 3 } 缺点:b ...

  5. Android 9 新功能 及 API 介绍(提供了实用的模块化的功能支持，包括 人工智能)

      Android 9(API 级别 28)为用户和开发者引入了众多新特性和新功能. 本文重点介绍面向开发者的新功能. 要了解新 API,请阅读 API 差异报告或访问 Android API 参考. ...

  6. (转)MVC 与三层架构

    原文:https://juejin.im/post/5929259b44d90400642194f3 MVC 与三层架构 一.简述 在软件开发中,MVC与三层架构这两个专业词汇经常耳闻,同时总有很多人 ...

  7. 趣谈unicode，ansi，utf-8，unicode big endian这些编码有什么区别

    从头讲讲编码的故事.那么就让我们找个草堆坐下,先抽口烟,看看夜晚天空上的银河,然后想一想要从哪里开始讲起.嗯,也许这样开始比较好…… 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同 ...

  8. JS 中 if / if...else...替换方式

    说说烂大街的if/if...else...,程序中用得最多的流程判断语句. 对着曾经满屏的if/if...else...,心想能不能搞点事情,折腾点浪花浪里呀浪. 对顶着"这个需求很简单,怎 ...

  9. 计数排序/Counting Sort

    计数排序的算法思想: 对于每一个元素x,只要确定了元素x有多少个比它小的元素,那么就可以知道其最终的位置. 记输入数组为A[n],存放最后排序输出的数组为B[n],提供临时存储空间的中间数组记为C[k ...

  10. 【云和恩墨】性能优化：Linux环境下合理配置大内存页(HugePage)

    原创 2016-09-12 熊军 [云和恩墨]性能优化:Linux环境下合理配置大内存页(HugePage)   熊军(老熊) 云和恩墨西区总经理 Oracle ACED,ACOUG核心会员 PC S ...