PHP前端开发

微信小程序picker组件详解实例代码

百变鹏仔 2天前 #前端问答
文章标签 详解

这篇文章主要介绍了微信小程序 picker 组件详解及简单实例的相关资料,需要的朋友可以参考下

实现效果图:

微信小程序picker

滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器

普通选择器:mode=selector

属性名类型默认值说明
rangeArray[]mode为selector时,range有效
valueNumber0mode为selector时,是数字,表示选择了range中的第几个,从0开始。
bindchangeEventHandle value改变时触发change事件,event.detail= { value:value}

时间选择器:mode=time

属性名类型默认值说明
valueString 表示选中的时间,格式为"hh:mm"
 String 表示有效时间范围的开始,字符串格式为"hh:mm"
 String 表示有效时间范围的结束,字符串格式为"hh:mm"
 EventHandle value改变时触发change事件,event.detail= { value:value}

日期选择器:mode=date

属性名类型默认值说明
valueString0表示选中的日期,格式为"yyyy-MM-dd"
startString 表示有效日期范围的开始,字符串格式为"yyyy-MM-dd"
endString 表示有效日期范围的结束,字符串格式为"yyyy-MM-dd"
fieldsStringday有效值year,month,day,表示选择器的粒度
bindchangeEventHandle value改变时触发change事件,event.detail= { value:value}


示例代码:

<view> <view>地区选择器</view> <picker> <view>  当前选择:{{array[index]}} </view> </picker></view><view> <view>时间选择器</view> <picker> <view>  当前选择: {{time}} </view> </picker></view><view> <view>日期选择器</view> <picker> <view>  当前选择: {{date}} </view> </picker></view>
Page({ data: { array:["美国","中国","巴西","日本"], index:0, date:"2016-09-01", time:"12:01" }, bindPickerChange: function(e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, bindDateChange:function(e){ this.setData({ date:e.detail.value }) }, bindTimeChange:function(e){ this.setData({ time:e.detail.time }) }})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!