資訊專欄INFORMATION COLUMN
摘要：移動端選擇器有很多，各大組件都有自己的，比如，，，等等。這次的地區(qū)選擇，需要地區(qū)的省份市經(jīng)緯度，還要設(shè)置第一次點開的時候是特定城市。引入樣式和文件地區(qū)選擇級聯(lián)地區(qū)選擇設(shè)定默認選項省份城市代碼很簡單，不懂的百度一下。
移動端選擇器picker有很多，各大ui組件都有自己的picker，比如light7，HUI，MUI，jqueryUI等等。但是，我發(fā)現(xiàn)他們都有各種各樣的問題。這次的地區(qū)選擇，需要地區(qū)的省份+市+經(jīng)緯度，還要設(shè)置第一次點開的時候是特定城市。
demo：鏈接：https://pan.baidu.com/s/1n5ApFB4elywxD_QekhSW6Q 密碼：cd2k
分析一波問題：
先說light7，它的picker是最low的，data里只有選項，木有ID，更木有其他內(nèi)容。雙聯(lián)三聯(lián)picker的時候想特定一個選項就更別說了，在彈窗里用的時候更是惡心，曾經(jīng)改過它的源代碼，想讓它更實用一點，但只能用在普通選擇，這次的需求直接把它pass掉了。
HUI：它的picker比light7好一點點，data里面可以放value和text。但是在雙聯(lián)的時候并不能設(shè)置特定城市，而且在快速滾動的時候，迅速點確定，會出現(xiàn)結(jié)果是北京而內(nèi)容卻定格在天津的情況。
MUI：emmmm，這是一個最不要臉的框架：“最接近原生APP的前端框架”，以前拿它做過幾個P2P的APP，是挺簡單的，但是有很多奇怪的問題，比如和jquery各種沖突什么的，這里就不多說了。它的picker，只能設(shè)置單聯(lián)的特定城市，在快速滾動點確定的時候比HUI還要不堪，會出現(xiàn)廣西壯族自治區(qū)——南京......而且治不好。。。
最后選擇了mobile Picker：這個東西暫時沒發(fā)現(xiàn)類似上面那些框架的毛病，起碼在這次的需求是完全滿足的。
mobileSelect Demo
地區(qū)選擇-級聯(lián)
代碼很簡單，不懂的百度一下。
最后發(fā)表一下感言，以前喜歡用框架，項目做多了才發(fā)現(xiàn)沒有一款框架是可以完美滿足一切需求的，現(xiàn)在我做移動端項目已經(jīng)不再用框架了，因為框架需要加載CSS和JS，就算再好的框架也是會占用帶寬和用戶瀏覽器性能的，不如提取出各框架中有用的屬性或者模塊，視項目而選擇屬性加載。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/1502.html
摘要：最近在項目重構(gòu)的過程中，發(fā)現(xiàn)之前用寫的地區(qū)選擇指令在中很難重用畢竟是用。但是此組件并不符合我的要求。我不是單純的選擇省市區(qū)，還可能是選擇省市或者省。 最近在項目重構(gòu)的過程中，發(fā)現(xiàn)之前用mobiscroll寫的地區(qū)選擇指令在angular2中很難重用（畢竟是用typeScript）。于是就萌生了自己寫一個組件的想法。想和之前一樣基于mobiscroll去寫，但是發(fā)現(xiàn)非常耗費精力，于是某日...
在項目中，要求微信小程序的地區(qū)可以選擇偽五級聯(lián)動 展示如下 這里采用的是自定義多列選擇器picker mode="multiSelector" <viewclass="section"> <viewclass="section__title">多列選擇器</view> <pick...
需求：在小程序開發(fā)中，時常會遇到日期選擇器、時間選擇器或者地區(qū)選擇器來進行選擇的功能。這是可以形成模板，只是在其中有細微變化，比如：樣式會多樣化、功能會復(fù)雜化?，F(xiàn)在我們寫一個合適的組件?！ ∠旅娓蠹曳窒硐挛覍懙囊粋€自定義日期選擇器組件 首先上效果圖看看: 主要步驟： 第一步：首先自定義選擇器組件需要用到picker-view跟picker-view-column。使用方法如下~ &l...
摘要：幾個主要屬性選取范圍，數(shù)據(jù)類型為，為普通選擇器時，有效的值表示選擇了中的第幾個下標從開始，數(shù)據(jù)類型肯定是綁定事件，改變時觸發(fā)事件，。代碼如下選項一選項二選項三一二三四五這樣，一個頁面使用多個的問題就解決了。但在發(fā)現(xiàn)小一個問題。 一、picker基本概念 當(dāng)然先看官方文檔 picker說明搞清楚基本概念從底部彈起的滾動選擇器，現(xiàn)支持三種選擇器，通過mode來區(qū)分，分別是普通選擇器，時間選...
閱讀 847·2023-04-25 19:43
閱讀 4115·2021-11-30 14:52
閱讀 3929·2021-11-30 14:52
閱讀 4027·2021-11-29 11:00
閱讀 3921·2021-11-29 11:00
閱讀 4039·2021-11-29 11:00
閱讀 3757·2021-11-29 11:00
閱讀 6605·2021-11-29 11:00
