移動端選擇器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，就算再好的框架也是會占用帶寬和用戶瀏覽器性能的，不如提取出各框架中有用的屬性或者模塊，視項目而選擇屬性加載。