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/>组件,其他节点不会显示。