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