picker滚动选择器

本文编辑： Flyinthesky Flyinthesky浏览 12363 版权所有，严禁转载

组件说明:

picker:
滚动选择器，现支持三种选择器，通过mode属性来区分，分别是普通选择器(mode = selector)，时间选择器(mode = time)，日期选择器(mode = date)，默认是普通选择器。

组件用法：


wxml

  1. <view class="page">
  2.   <view class="page__hd">
  3.     <text class="page__title">picker</text>
  4.     <text class="page__desc">选择器</text>
  5.   </view>
  6.   <view class="page__bd">
  7.     <view class="section">
  8.       <view class="section__title">地区选择器</view>
  9.       <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  10.         <view class="picker">
  11.           当前选择：{{array[index]}}
  12.         </view>
  13.       </picker>
  14.     </view>
  15.     <view class="section">
  16.       <view class="section__title">时间选择器</view>
  17.       <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  18.         <view class="picker">
  19.           当前选择: {{time}}
  20.         </view>
  21.       </picker>
  22.     </view>
  24.     <view class="section">
  25.       <view class="section__title">日期选择器</view>
  26.       <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
  27.         <view class="picker">
  28.           当前选择: {{date}}
  29.         </view>
  30.       </picker>
  31.     </view>
  32.   </view>
  33. </view>

js

  1. Page({
  2.   data: {
  3.     array: ['中国', '美国', '巴西', '日本'],
  4.     index: 0,
  5.     date: '2016-09-01',
  6.     time: '12:01'
  7.   },
  8.   bindPickerChange: function(e) {
  9.     console.log('picker发送选择改变，携带值为', e.detail.value)
  10.     this.setData({
  11.       index: e.detail.value
  12.     })
  13.   },
  14.   bindDateChange: function(e) {
  15.     this.setData({
  16.       date: e.detail.value
  17.     })
  18.   },
  19.   bindTimeChange: function(e) {
  20.     this.setData({
  21.       time: e.detail.value
  22.     })
  23.   }
  24. })

wxss

  1. .page {
  2.     min-height: 100%;
  3.     flex: 1;
  4.     background-color: #FBF9FE;
  5.     font-size: 32rpx;
  6.     font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  7.     overflow: hidden;
  8. }
  9. .page__hd{
  10.     padding: 50rpx 50rpx 100rpx 50rpx;
  11.     text-align: center;
  12. }
  13. .page__title{
  14.     display: inline-block;
  15.     padding: 20rpx 40rpx;
  16.     font-size: 32rpx;
  17.     color: #AAAAAA;
  18.     border-bottom: 1px solid #CCCCCC;
  19. }
  20. .page__desc{
  21.     display: none;
  22.     margin-top: 20rpx;
  23.     font-size: 26rpx;
  24.     color: #BBBBBB;
  25. }
  26. .picker{
  27.   padding: 26rpx;
  28.   background-color: #FFFFFF;
  29. }
  30. .section{
  31.     margin-bottom: 80rpx;
  32. }
  33. .section__title{
  34.     margin-bottom: 16rpx;
  35.     padding-left: 30rpx;
  36.     padding-right: 30rpx;
  37. }

主要属性：

普通选择器：(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”
start String 表示有效时间范围的开始，字符串格式为”hh:mm”
end String 表示有效时间范围的结束，字符串格式为”hh:mm”
bindchange 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}

相关链接：

如有技术问题或对本文有反馈，请加入QQ群：
微信小程序实战5营： 微信小程序Club实战5营

上一篇：label标签

下一篇：radio单选项目