当前位置：首页 > 资讯 > 技术文档

微信小程序 picker 组件详解及简单实例

时间：2022-11-14 04:45 编辑：来源：阅读：
扫一扫，手机访问

摘要：微信小程序 picker 组件详解及简单实例

[b]微信小程序picker [/b] [b]相关文章：[/b] [b][url=http://www.1sucai.cn/article/102587.htm]微信小程序 Button [/url][/b] [b][url=http://www.1sucai.cn/article/102603.htm]微信小程序 radio [/url][/b] [b][url=http://www.1sucai.cn/article/102602.htm]微信小程序 slider [/url][/b] [b][url=http://www.1sucai.cn/article/102601.htm]微信小程序 switch[/url][/b] [b][url=http://www.1sucai.cn/article/102600.htm]微信小程序 textarea[/url][/b] [b][url=http://www.1sucai.cn/article/102598.htm]微信小程序 picker-view [/url][/b] [b][url=http://www.1sucai.cn/article/102597.htm]微信小程序 picker [/url][/b] [b][url=http://www.1sucai.cn/article/102596.htm]微信小程序 label [/url][/b] [b][url=http://www.1sucai.cn/article/102594.htm]微信小程序 input [/url] [/b] [b][url=http://www.1sucai.cn/article/102591.htm]微信小程序 form [/url][/b] [b][url=http://www.1sucai.cn/article/102590.htm]微信小程序 checkbox [/url] [/b] 实现效果图： [url=http://files.jb51.net/file_images/article/201701/201701101457049.png][img]http://files.jb51.net/file_images/article/201701/201701101457049.png[/img] [/url] [b]微信小程序picker [/b] 滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器 [b]普通选择器：mode=selector[/b]

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

[b]时间选择器：mode=time[/b]

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

[b]日期选择器：mode=date[/b]

属性名	类型	默认值	说明
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}

[b]示例代码：[/b]

<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
 })
 }
})

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

全部评论(0)

上一篇：微信小程序 Template详解及简单实例
下一篇：新闻内页-JS分页

资讯排行榜
更多>>