微信小程序 picker 组件详解及简单实例
2017-01-10 14:59
1236 查看
相关文章:
实现效果图:
滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器
普通选择器:mode=selector
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
range | Array | [] | mode为selector时,range有效 |
value | Number | 0 | mode为selector时,是数字,表示选择了range中的第几个,从0开始。 |
bindchange | EventHandle | value改变时触发change事件,event.detail= { value:value} |
时间选择器:mode=time
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | 表示选中的时间,格式为"hh:mm" | |
String | 表示有效时间范围的开始,字符串格式为"hh:mm" | ||
String | 表示有效时间范围的结束,字符串格式为"hh:mm" | ||
EventHandle | value改变时触发change事件,event.detail= { value:value} |
日期选择器:mode=date
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | 0 | 表示选中的日期,格式为"yyyy-MM-dd" |
start | String | 表示有效日期范围的开始,字符串格式为"yyyy-MM-dd" | |
end | String | 表示有效日期范围的结束,字符串格式为"yyyy-MM-dd" | |
fields | String | day | 有效值year,month,day,表示选择器的粒度 |
bindchange | EventHandle | value改变时触发change事件,event.detail= { value:value} |
示例代码:
<view class="section"> <view class="section__title">地区选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择:{{array[index]}} </view> </picker> </view> <view class="section"> <view class="section__title">时间选择器</view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker"> 当前选择: {{time}} </view> </picker> </view> <view class="section"> <view class="section__title">日期选择器</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 当前选择: {{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 }) } })
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
您可能感兴趣的文章:
- 微信小程序 使用picker封装省市区三级联动实例代码
- 微信小程序 picker-view 组件详解及简单实例
- 微信小程序之picker日期和时间选择器
- 微信小程序 (十八)picker组件详细介绍
- 微信小程序picker组件下拉框选择input输入框的实例
- 微信小程序picker组件简单用法示例【附demo源码下载】
- 微信小程序loading组件显示载入动画用法示例【附源码下载】
- 微信小程序使用audio组件播放音乐功能示例【附源码下载】
- 微信小程序使用video组件播放视频功能示例【附源码下载】
- 微信小程序使用image组件显示图片的方法【附源码下载】
- 微信小程序使用picker实现时间和日期选择框功能【附源码下载】
相关文章推荐
- 微信小程序 picker-view 组件详解及简单实例
- 微信小程序 textarea 组件详解及简单实例
- 微信小程序 Button 组件详解及简单实例
- 微信小程序 checkbox组件详解及简单实例
- 微信小程序 switch组件详解及简单实例
- 微信小程序 form组件详解及简单实例
- 微信小程序 label 组件详解及简单实例
- 微信小程序 简单教程实例详解
- 微信小程序 自己制作小组件实例详解
- 微信小程序 navigator 组件实例详解
- 微信小程序 WXDropDownMenu组件详解及实例代码
- 微信小程序 swiper组件轮播图详解及实例
- 微信小程序组件 contact-button(客服会话按钮)详解及实例代码
- 微信小程序 视图容器组件的详解及实例代码
- 微信小程序 地图map详解及简单实例
- 微信小程序 高德地图SDK详解及简单实例(源码下载)
- 微信小程序 swiper组件详解及实例代码
- 微信小程序 Template详解及简单实例
- 微信小程序 video组件详解及实例代码