picker-view 滚动选择器

解释：可嵌页面的滚动选择器

属性说明

属性名类型默认值必填说明
valueArray.<number>[]否数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-styleString否设置选择器中间选中框的样式
indicator-classString否设置选择器中间选中框的类名
mask-styleString否设置蒙层的样式
mask-classString否设置蒙层的类名
bindchangeEventHandle否当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value 为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）

示例

在开发者工具中预览效果

扫码体验

picker-view 滚动选择器 - 图1请使用百度APP扫码

代码示例

  1. <view class="wrap">
  2.     <view class="page-body">
  3.     <view class="selected-date">{{year}}年{{month}}月{{day}}日</view>
  4.     <picker-view  indicator-style ="color: #74fa7d" mask-class="maskStyle" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
  5.         <picker-view-column>
  6.             <view s-for="item in years" class="item">{{item}}年</view>
  7.         </picker-view-column>
  8.         <picker-view-column>
  9.             <view s-for="item in months" class="item">{{item}}月</view>
  10.         </picker-view-column>
  11.         <picker-view-column>
  12.             <view s-for="item in days" class="item">{{item}}日</view>
  13.         </picker-view-column>
  14.     </picker-view>
  15.   </view>
  16. </view>
  1. const date = new Date()
  2. const years = []
  3. const months = []
  4. const days = []
  5. for (let i = 1990; i <= date.getFullYear(); i++) {
  6.     years.push(i)
  7. }
  8. for (let i = 1; i <= 12; i++) {
  9.     months.push(i)
  10. }
  11. for (let i = 1; i <= 31; i++) {
  12.     days.push(i)
  13. }
  14. Page({
  15.     data: {
  16.         years,
  17.         year: date.getFullYear(),
  18.         months,
  19.         month: 2,
  20.         days,
  21.         day: 2,
  22.         value: [9999, 1, 1],
  23.         isDaytime: true,
  24.     },
  25.     bindChange(e) {
  26.         const val = e.detail.value
  27.         this.setData({
  28.             year: this.data.years[val[0]],
  29.             month: this.data.months[val[1]],
  30.             day: this.data.days[val[2]],
  31.             isDaytime: !val[3]
  32.         })
  33.     }
  34. });

Bug & Tip

Tip：其中只可放置<picker-view-column/>组件，其他节点不会显示。