城市選擇器 region
//index.wxml
<picker mode="region" bindchange="bindRegionChange" value="{{region}}">
<view class="picker">
當(dāng)前選擇:{{region[0]}},{{region[1]}},{{region[2]}}
view>
picker>
//index.js
data: {
region: ['廣東省', '廣州市', '海珠區(qū)']
}
多列選擇器 multiSelector
腦殘沒有關(guān)注官方更新,自己寫了個(gè)城市選擇器。
// City.js
// 省份
var provinceList = [
{ "id": "11", "name": "北京", "initial": "B" },
...];
var cityList = [
{
"provinceId": "11",
"citys": [
{ "id": "1", "name": "昌平" },
...]
}
];
// 點(diǎn)擊省份,獲取城市列表
function getCitysById(id) {
let provinceId = provinceList[id].id;
var tempObj = [];
for (let i = 0; i < cityList.length; i++) {
if (cityList[i].provinceId == provinceId) {
tempObj = cityList[i].citys;
break;
}
}
return tempObj;
}
module.exports = {
provinceList: provinceList,
getCitysById: getCitysById
}
// Picker.wxml
<picker mode="multiSelector" value="{{index}}" bindcolumnchange="bindPickerChange" range="{{province}}" range-key="{{'name'}}">
<view class="picker">
當(dāng)前選擇:{{province[0][0].name}}{{province[1][0].name}}
view>
picker>
// Picker.js
var cityObj = require("../../utils/city")
Page({
data: {
index: 0
},
onLoad: function (options) {
var defaultCitys = cityObj.getCitysById("0")
this.setData({
province: [cityObj.provinceList, defaultCitys]
})
},
bindPickerChange(e) {
if (e.detail.column == 0) {
var citys = cityObj.getCitysById(e.detail.value);
this.setData({
province: [cityObj.provinceList, citys]
})
}
}
})
時(shí)間選擇器 time
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
當(dāng)前選擇: {{time}}
view>
picker>
日期選擇器 date
<picker mode="date" value="{{time}}" start="2015-09-01" end="2017-09-01" fields="month" bindchange="bindTimeChange">
<view class="picker">
當(dāng)前選擇: {{time}}
view>
picker>