AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-02-06 11:33:55

滚动选择去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

属性名类型默认值说明
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是否禁用

注意:开发工具暂时只支持mode = selector。

示例代码:

<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: ['美国', '中国', '巴西', '日本'],
    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

扩展阅读:

微信 小程序开发组件:表单组件button,form,input,picker-微信 小程序开发教程

按钮button-表单组件-微信小程序组件-微信 小程序开发教程

多项选择器checkbox-group-表单组件-微信小程序组件-微信 小程序开发教程


表单form-表单组件-微信小程序组件-微信 小程序开发教程

 输入框input-表单组件-微信小程序组件-微信 小程序开发教程

label详解-表单组件-微信小程序组件-微信 小程序开发教程

滚动选择去picker详解-表单组件-微信小程序组件-微信 小程序开发教程

嵌入页面的滚动选择器picker-view详解-表单组件-微信小程序组件-微信 小程序开发教程

单项选择器radio详解-表单组件-微信小程序组件-微信 小程序开发教程

滑动选择器slider详解-表单组件-微信小程序组件-微信 小程序开发教程

开关选择器switch详解-表单组件-微信小程序组件-微信 小程序开发教程

多行输入框textarea详解-表单组件-微信小程序组件-微信 小程序开发教程


193阅读 | 0评论
你的回应