尚学堂

微信小程序表单组件 picker

我要纠错

微信小程序picker

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

普通选择器:mode=selector

属性名类型默认值说明
rangeArray / Object Array[]mode为 selector 时,range 有效
range-keyString 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valueNumber0value 的值表示表示选择了 range 中的第几个(下标从 0 开始)。
bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value}
disabledBooleanfalse是否禁用

时间选择器:mode=time(注:当picker默认值(value)的分钟大于end属性规定的时间时,出现可选择大于规定时间的bug)

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

日期选择器: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}
disabledBooleanfalse是否禁用

fields 有效值:

说明
year选择器粒度为年
month选择器粒度为月份
day选择器粒度为天
注意:开发工具暂时只支持mode = selector。

示例代码:

<view class="section">
    <view class="sectiontitle">地区选择器</view>
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="picker">
            当前选择:{{array[index]}}
        </view>
    </picker>
</view>
<view class="section">
    <view class="sectiontitle">时间选择器</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="sectiontitle">日期选择器</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:["美国","中国","巴西","日本"],    objectArray: [      {        id: 0,        name: '美国'      },      {        id: 1,        name: '中国'      },      {        id: 2,        name: '巴西'      },      {        id: 3,        name: '日本'      }    ],    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.value
    })
  }
})

picker

二维码
建议反馈
二维码