后浪云百度小程序教程：picker-view 滚动选择器

2022-3-19
  • 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 中打开

    扫码体验

    代码示例

    后浪云百度小程序教程：picker-view 滚动选择器插图

    请使用百度APP扫码

    代码示例

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

    Bug & Tip

    • Tip：其中只可放置 picker-view-column 组件，其他节点不会显示。
    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/186129/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    IDC.NET智能小程序后浪云百度小程序
    Copyright © 2025 后浪云 网站地图