picker-view

嵌入页面的滚动选择器。

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

picker-view-column

仅可放置于中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致

示例

  2. <view class="container">
  4.   <view class="page-body">
  5.     <view class="page-section">
  6.       <view>
  7.         <view style="text-align: center;">{{year}}年{{month}}月{{day}}日</view>
  8.         <picker-view style="height: 750rpx" value="{{value}}" bindchange="bindChange">
  9.           <picker-view-column style="text-align: center;">
  10.              <view :for="{{years}}">{{item}}年</view>
  11.           </picker-view-column>
  12.           <picker-view-column style="text-align: center;">
  13.              <view :for="{{months}}">{{item}}月</view>
  14.           </picker-view-column>
  15.           <picker-view-column style="text-align: center;">
  16.             <view :for="{{days}}">{{item}}日</view>
  17.           </picker-view-column>
  18.         </picker-view>
  19.       </view>
  20.     </view>
  21.   </view>
  23. </view>
  2. const date = new Date()
  3. const years = []
  4. const months = []
  5. const days = []
  7. for (let i = 1990; i <= date.getFullYear(); i++) {
  8.     years.push(i)
  9. }
  11. for (let i = 1; i <= 12; i++) {
  12.     months.push(i)
  13. }
  15. for (let i = 1; i <= 31; i++) {
  16.     days.push(i)
  17. }
  19. Page({
  20.     data: {
  21.         years: years,
  22.         year: date.getFullYear(),
  23.         months: months,
  24.         month: 2,
  25.         days: days,
  26.         day: 2,
  27.         year: date.getFullYear(),
  28.         value: [9999, 1, 1],
  29.     },
  30.     bindChange: function (e) {
  31.         const val = e.detail.value
  32.         this.setData({
  33.             year: this.data.years[val[0]],
  34.             month: this.data.months[val[1]],
  35.             day: this.data.days[val[2]]
  36.         })
  37.     }
  38. })

picker-view - 图1

原文: https://developer.toutiao.com/docs/comp/picker-view.html