picker-view 滚动选择器
- 属性说明
- 示例
  - 代码示例
- Bug & Tip

picker-view 滚动选择器

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

属性说明

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

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS

 
 
 
  
  
  <view class="wrap">
  
  
   <view class="card-area">
  
  
   <view class="selected-date">{{year}}年{{month}}月{{day}}日</view>
  
  
   <picker-view
  
  
   indicator-style ="color: #74fa7d"
  
  
   mask-class="maskStyle"
  
  
   style="width: 100%;
  
  
   height: 300px;"
  
  
   value="{{value}}"
  
  
   title="选择器标题"
  
  
   bindchange="bindChange">
  
  
   <picker-view-column>
  
  
   <view s-for="item in years" class="item">{{item}}年</view>
  
  
   </picker-view-column>
  
  
   <picker-view-column>
  
  
   <view s-for="item in months" class="item">{{item}}月</view>
  
  
   </picker-view-column>
  
  
   <picker-view-column>
  
  
   <view s-for="item in days" class="item">{{item}}日</view>
  
  
   </picker-view-column>
  
  
   </picker-view>
  
  
   </view>
  
  
  </view>

 
 
 
  
  
  const date = new Date()
  
  
  const years = []
  
  
  const months = []
  
  
  const days = []
  
  
  
  
  
  for (let i = 1990; i <= date.getFullYear(); i++) {
  
  
   years.push(i)
  
  
  }
  
  
  
  
  
  for (let i = 1; i <= 12; i++) {
  
  
   months.push(i)
  
  
  }
  
  
  
  
  
  for (let i = 1; i <= 31; i++) {
  
  
   days.push(i)
  
  
  }
  
  
  
  
  
  let app = getApp();
  
  
  
  
  
  Page({
  
  
   data: {
  
  
   years,
  
  
   year: date.getFullYear(),
  
  
   months,
  
  
   month: 2,
  
  
   days,
  
  
   day: 2,
  
  
   value: [9999, 1, 1]
  
  
   },
  
  
   bindChange(e) {
  
  
   const val = e.detail.value
  
  
   this.setData({
  
  
   year: this.data.years[val[0]],
  
  
   month: this.data.months[val[1]],
  
  
   day: this.data.days[val[2]]
  
  
   })
  
  
   }
  
  
  });