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

番茄西红柿发布于2019-04-23 13:09 / 1938人阅读

摘要：移动端选择器有很多，各大组件都有自己的，比如，，，等等。这次的地区选择，需要地区的省份市经纬度，还要设置第一次点开的时候是特定城市。引入样式和文件地区选择级联地区选择设定默认选项省份城市代码很简单，不懂的百度一下。

移动端选择器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：这个东西暂时没发现类似上面那些框架的毛病，起码在这次的需求是完全满足的。




    
        
        mobileSelect Demo
        
        
        
        
        
        

        
        
        
        

    

    

        
            地区选择-级联

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

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

云服务器 GPU云服务器各大云服务器的优劣地区选择地区选择api 青云主机地区选择

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1502.html

Ionic2+angular4地区选择组件

摘要：最近在项目重构的过程中，发现之前用写的地区选择指令在中很难重用毕竟是用。但是此组件并不符合我的要求。我不是单纯的选择省市区，还可能是选择省市或者省。最近在项目重构的过程中，发现之前用mobiscroll写的地区选择指令在angular2中很难重用（毕竟是用typeScript）。于是就萌生了自己写一个组件的想法。想和之前一样基于mobiscroll去写，但是发现非常耗费精力，于是某日...

FleyX 2019-08-20 18:20 评论0 收藏0
演示微信小程序地区选择伪五级联动

　　在项目中，要求微信小程序的地区可以选择伪五级联动　　展示如下　　这里采用的是自定义多列选择器picker mode="multiSelector"　　<viewclass="section"> 　　<viewclass="section__title">多列选择器</view> 　　<pick...

3403771864 2022-11-08 23:27 评论0 收藏0
微信小程序日期选择器使用实例

　　需求：在小程序开发中，时常会遇到日期选择器、时间选择器或者地区选择器来进行选择的功能。这是可以形成模板，只是在其中有细微变化，比如：样式会多样化、功能会复杂化。现在我们写一个合适的组件。　　下面跟大家分享下我写的一个自定义日期选择器组件　　首先上效果图看看:　　主要步骤：　　第一步：首先自定义选择器组件需要用到picker-view跟picker-view-column。使用方法如下~　　&l...

3403771864 2022-11-19 22:18 评论0 收藏0
微信小程序picker组件遇到的问题与解决方案

摘要：几个主要属性选取范围，数据类型为，为普通选择器时，有效的值表示选择了中的第几个下标从开始，数据类型肯定是绑定事件，改变时触发事件，。代码如下选项一选项二选项三一二三四五这样，一个页面使用多个的问题就解决了。但在发现小一个问题。一、picker基本概念当然先看官方文档 picker说明搞清楚基本概念从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选...

tulayang 2019-08-20 17:18 评论0 收藏0