选择器不是指css那种样式选择器
小程序的滚动选择器就是一种可以从众多条目中选择一个的组件
使用picker标签表示, picker也分不同的类型, 根据picker的一个属性mode来区分
mode = 'selector'普通选择器
mode = 'time'时间选择器
mode = 'date'日期选择器
如果没有mode属性, 则默认就是普通选择器
普通选择器:
<view class='container'>
<picker range='{{cityArr}}' vlaue='{{cityArr[index]}}' bindchange='cityChange' mode='selector'>
<button size='mini'>{{cityArr[index]}} | 修改城市</button>
</picker>
</view>
rang表示要选择的范围, 为数组类型(或对象数组), 即要表示多个值
value当前显示项
bingchang修改当前值的事件
Page({
data: {
cityArr : ["北京", "上海", '广州', '成都'],
index:0
},
cityChange : function(e) {
this.setData({
index : e.detail.value /*获取到的就是rang范围中的 当前选中项的下标*/
});
}
})
时间选择器:
<view class='container'>
<picker mode='time' start='08:10' end='22:30' value='{{currentTime}}' bindchange='timeChange'>
<button size='mini'>{{currentTime}} | 设置时间</button>
</picker>
</view>
时间选择器(mode='time')常用属性
start开始选择的时间, 也就是能选择的最小值(这里设置的是08:10)
end与start相反
value当前显示项
bindchang事件处理
Page({
data: {
currentTime : "12:10"
},
timeChange : function(e) {
this.setData({
currentTime : e.detail.value /*没有下标, 获取到的值就是当前项*/
});
}
})
日期选择器:
<view class='container'>
<picker start='2008:05:12' end='2018:07:26' bindchange='dateChange' mode='date' value='{{currentDate}}'>
<button size='mini'>{{currentDate}} | 修改日期</button>
</picker>
</view>
start, end, value, bindchang所表示的意思和上面的几乎是一样的(和mode='time')
Page({
data: {
currentDate : "2010:1:01"
},
dateChange : function(e) {
this.setData({
currentDate : e.detail.value
});
}
})