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

移动端选择器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 = 0var ss = 0for(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，就算再好的框架也是会占用带宽和用户浏览器性能的，不如提取出各框架中有用的属性或者模块，视项目而选择属性加载。

转载于:https://www.cnblogs.com/ovocake/p/10027340.html

地区picker 各选择器，优劣分析相关推荐

range 小程序picker_微信小程序picker滚动选择器使用详解
今天修改小程序做章节内容筛选使用到了picker滚动选择器,看了官方文档和一些网上的文章后,终于算是弄明白了这个组件的使用,这里把我对这picker滚动选择器的使用记录下: picker基础使用 pi ...
MediaPlayer与SoundPooly优劣分析
MediaPlayer与SoundPooly优劣分析: 加载长音乐文件生成数据ID,可能会出现错误,错误原因可能是:利用SoundPool播放音乐文件,首先都会对需要播放的音乐文件通过load()函数 ...
在日常使用中关于英特尔睿频加速的优劣分析（附带关闭睿频加速的两种方法）
在日常使用中关于英特尔睿频加速的优劣分析事情背景事情起因过程分析测试日常使用分析结论开关睿频加速(寻找解决方法的朋友可以直接跳到这里来) 方法1:在电源管理操控是否开启睿频加速(推荐) 解 ...
CAS自旋锁与互斥锁优劣分析
加锁的目的只有一个就是保证共享资源在任意时间内,只有一个线程可以访问,以此避免数据共享导致错乱的问题.自旋锁和互斥锁只是通过不同的方式对锁进行实现.锁没有对的只有合适的. 互斥锁最为常见的互斥锁就是 ...
中国防尘口罩行业：包含类型、应用、地区及竞争等维度分析
贝哲斯咨询从产品类型.下游应用领域及竞争态势三个维度详细分析了对中国防尘口罩的行业发展概况和市场趋势.提供了有关防尘口罩市场产销.进出口.行业规模.增长率.份额等关键数据,同时也提供了防尘口罩行业重点 ...
uniapp三级地区picker选择器
今天来介绍一个三级选地区的picker选择器.大概长这样. 地址的数据我是拿高德api获取的数据.获取的数据是这样. (1)首选我们获取高德api的秘钥.之后创建一个key秘钥. https://co ...
转载：WeUI Picker组件--源码分析
原文链接:WeUI Picker组件源代码分析 https://www.cnblogs.com/haha1212/p/8393243.html 前言:由于最近做的一个移动端项目需要用到类似WeUI ...
企业×××远程接入的优劣分析
来源:深圳卓网科技 http://www.jowan.cn 企业为实现远程应用,采用的最多的就是×××,主要原因无非是考虑数据安全.各种×××的技术比较不用多讲(网上已经有一大堆的资料),我们作 ...
【微信小程序】picker 滚动选择器
选择性别参考:picker | 微信开放文档 <view style="display: flex; align-items: center;">选择性别:<p ...
铸造硅砂行业类型、应用、地区及竞争等维度分析
贝哲斯咨询聚焦于全球与中国铸造硅砂行业发展现状.产业规模趋势.产业链发展状况.市场供需.竞争格局.标杆企业市场表现.市场发展空间.及发展策略等,同时分析了铸造硅砂行业将面临的机遇与挑战,并对铸造硅砂行 ...

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

地区picker 各选择器，优劣分析相关推荐

最新文章

热门文章