小程序 表单组件 picker

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

普通选择器：mode=selector

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

时间选择器：mode=time（注：当picker默认值（value）的分钟大于end属性规定的时间时，出现可选择大于规定时间的bug）

日期选择器：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}
disabled	Boolean	false	是否禁用

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

转载本站内容时，请务必注明来自W3xue，违者必究。