picker-view
嵌入页面的滚动选择器。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| value | [Number] | 否 | 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 | ||
| indicator-style | String | 否 | 设置选择器中间选中框的样式 | ||
| indicator-class | String | 否 | 设置选择器中间选中框的类名 | ||
| mask-style | String | 否 | 设置蒙层的样式 | ||
| mask-class | String | 否 | 设置蒙层的类名 | ||
| bindchange | EventHandle | 否 | 滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始） | ||
| bindpickstart | EventHandle | 否 | 当滚动选择开始时候触发事件 | ||
| bindpickend | EventHandle | 否 | 当滚动选择结束时候触发事件 |
picker-view-column
滚动选择器子项。 放置于picker-view 中，其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致
示例代码：
<!--pages/component/pages/picker-view/picker-view.mcml-->
<view class="container">
<view class="statement">嵌入页面的滚动选择器。</view>
<picker-view
style="height:400rpx;background-color:white;"
bindchange="bindchange"
bindpickstart="bindpickstart"
bindpickend="bindpickend"
value = ""
>
<picker-view-column>
<view style="line-height: 34px; text-align: center;" mc:for="{{tags}}">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view style="line-height: 34px; text-align: center;" mc:for="{{values}}">{{item}}</view>
</picker-view-column>
</picker-view>
<button bindtap="setPickerValue">选中[1, 3]</button>
<view class="cssname">bindpickstart：当滚动选择开始时候触发, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail"></text>
<view class="cssname">bindchange：滚动选择时触发, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail"></text>
<view class="cssname">bindpickend：当滚动选择结束时候触发, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail"></text>
</view>
// pages/component/pages/picker-view/picker-view.js
var values = [
['😀','😃','😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😳', '🐶', '🐭', '🐹', '⚽️', '🏀'],
['¡', '!', '¿', '?', '⸘', '‽', '%', '‰', '‱', '§'],
['☀︎', '☃︎', '♣︎', '♚', '♕', '⚂', '☕︎', '✒︎', '✇', '✈︎', '♞', '★'],
Array.from(new Array(100).keys())
];
Page({
data: {
tags:[
'emoji', '标点符号', '象形文字','数字'
],
values: values[0]
},
bindchange: function(e){
this.setData({
bindchange: JSON.stringify(e, null, 2)
})
this.setData({
values: values[e.detail.value[0]]
})
},
bindpickstart: function(e){
this.setData({
bindpickstart: JSON.stringify(e, null, 2)
})
},
bindpickend: function(e){
this.setData({
bindpickend: JSON.stringify(e, null, 2)
})
},
setPickerValue: function(e){
this.setData({
pickerValue: [1, 3]
})
}
})