picker-view 滚动选择器

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

属性说明

属性名类型默认值必填说明
valueArray[]否数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项
indicator-styleString否设置选择器中间选中框的样式
indicator-classString否设置选择器中间选中框的类名
mask-styleString否设置蒙层的样式
mask-classString否设置蒙层的类名
titleString否选择器标题，建议标题控制在 12 个中文汉字长度内，避免出现截断现象, 截断部分将以 … 形式展示
bindchangeEventHandle否当滚动选择，value 改变时触发 change 事件，event.detail = {value: value};value 为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

代码示例

  • SWAN
  • JS
  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="selected-date">{{year}}年{{month}}月{{day}}日</view>
  4.         <picker-view
  5.             indicator-style ="color: #74fa7d"
  6.             mask-class="maskStyle"
  7.             style="width: 100%;
  8.             height: 300px;"
  9.             value="{{value}}"
  10.             title="选择器标题"
  11.             bindchange="bindChange">
  12.             <picker-view-column>
  13.                 <view s-for="item in years" class="item">{{item}}年</view>
  14.             </picker-view-column>
  15.             <picker-view-column>
  16.                 <view s-for="item in months" class="item">{{item}}月</view>
  17.             </picker-view-column>
  18.             <picker-view-column>
  19.                 <view s-for="item in days" class="item">{{item}}日</view>
  20.             </picker-view-column>
  21.         </picker-view>
  22.     </view>
  23. </view>
  1. const date = new Date()
  2. const years = []
  3. const months = []
  4. const days = []
  6. for (let i = 1990; i <= date.getFullYear(); i++) {
  7.     years.push(i)
  8. }
  10. for (let i = 1; i <= 12; i++) {
  11.     months.push(i)
  12. }
  14. for (let i = 1; i <= 31; i++) {
  15.     days.push(i)
  16. }
  18. let app = getApp();
  20. Page({
  21.     data: {
  22.         years,
  23.         year: date.getFullYear(),
  24.         months,
  25.         month: 2,
  26.         days,
  27.         day: 2,
  28.         value: [9999, 1, 1]
  29.     },
  30.     bindChange(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. });

Bug & Tip