@feidao-msz/wheel-picker
Version:
仿 iOS UIPickerView 的滚动选择器
140 lines (127 loc) • 4.17 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>WheelPicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="./dist/wheelpicker.min.css">
<style>
body {
font-size: 14px;
}
form {
margin: 50px;
}
form div {
margin-bottom: 30px;
}
#wheelpicker-demo3 .wheelpicker-wheel {
width: 33.3%;
}
</style>
</head>
<body>
<form class="pure-form">
<h1>WheelPicker</h1>
<p>仿 iOS UIPickerView 的滚动选择器</p>
<div>
<h3>单列</h3>
<a href="javascript:;" id="demo1">显示</a>
</div>
<div class="div">
<h3><label for="demo2">两列带默认值</label></h3>
<input type="text" id="demo2">
</div>
<div class="div">
<h3><label for="demo3">城市联动</label></h3>
<input type="text" id="demo3" placeholder="点击选择">
</div>
</form>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
<script src="./dist/wheelpicker.min.js"></script>
<script>
var frutis = "西瓜,柠檬,草莓,荔枝,橘子,菠萝,香蕉,柚子,苹果,龙眼".split(",");
var frutisEn = "watermelon,lemon,strawberry,litchi,orange,pineapple,banana,grapefruit,apple,longan".split(",");
var frutiData = frutis.map(function(name, idx) {
return {
text: name,
value: frutisEn[idx]
};
});
var vegetables = "香菜,青菜,芦笋,萝卜,水芹,黄瓜,冬瓜,番茄,茄子,土豆".split(",");
var vegetablesEn = "parsley,celery,asparagus,carrot,celery,cucumber,melon,tomato,eggplant,potato".split(",");
var vegetableData = vegetables.map(function(name, idx) {
return {
text: name,
value: vegetablesEn[idx]
};
});
var picker1 = new WheelPicker({
title: "单列选择器",
data: [frutis],
onSelect: function(selected) {
alert(selected[0].value);
}
});
document.getElementById("demo1").onclick = function() {
picker1.show();
return false;
};
var picker2 = new WheelPicker({
el: "#demo2",
data: [frutiData, vegetableData],
value: ["lemon", "carrot"]
});
fetch("https://cdn.jsdelivr.net/gh/modood/Administrative-divisions-of-China/dist/pca.json")
.then(function(response) {
return response.json();
})
.then(function(data) {
var defaultProv = Object.keys(data)[0];
var picker3 = new WheelPicker({
el: "#demo3",
hideOnBackdrop: true,
hiddenInput: true,
data: [
Object.keys(data),
Object.keys(data[defaultProv]),
data[defaultProv][Object.keys(data[defaultProv])[0]]
],
onChange: function(index, selected) {
console.log("onChange", index, selected);
if (index === 0) {
var cityObj = data[selected.value];
var cities = cityObj ? Object.keys(cityObj) : [];
this.setData(cities, 1);
this.setData(cities.length ? cityObj[cities[0]] : [], 2);
} else if (index === 1) {
var prov = this.getSelectedItems()[0];
this.setData(data[prov.value][selected.value], 2);
}
},
onSelect: function(selected) {
console.log("onSelect", selected);
},
onShow: function() {
console.log("onShow");
},
onCancel: function() {
console.log("onCancel");
},
formatValue: function(value) {
return value.join(" ");
}
});
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46659645-6', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>