微信小程序组件解读和分析:十二、picker滚动选择器

picker滚动选择器组件说明:

picker:

滚动选择器,现支持三种选择器,通过mode属性来区分,

分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date),

默认是普通选择器。


picker滚动选择器示例代码运行效果如下:

微信小程序组件解读和分析:十二、picker滚动选择器

 




下面是WXML代码:

[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<view class="page">
  <view class="page__hd">
    <text class="page__title">picker</text>
    <text class="page__desc">选择器</text>
  </view>
  <view class="page__bd">
    <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>
  </view>
</view>



下面是JS代码:

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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.value
    })
  }
})



下面是WXSS代码:

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}
.page__hd{
    padding: 50rpx 50rpx 100rpx 50rpx;
    text-align: center;
}
.page__title{
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: #AAAAAA;
    border-bottom: 1px solid #CCCCCC;
}
.page__desc{
    display: none;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #BBBBBB;
}
.picker{
  padding: 26rpx;
  background-color: #FFFFFF;
}
.section{
    margin-bottom: 80rpx;
}
.section__title{
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}



picker滚动选择器的主要属性:

普通选择器:(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}

点击查看原文

微信小程序组件解读和分析:十二、picker滚动选择器

上一篇:微信小程序组件解读和分析:十三、radio单选项目


下一篇:手机web禁止微信调整字体