小程序开发之组件picker-view（嵌入页面的滚动选择器）

最新推荐文章于 2025-07-07 00:15:00 发布

原创

最新推荐文章于 2025-07-07 00:15:00 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了小程序中用于创建滚动选择器的picker-view组件，强调了它只能包含组件，并展示了如何使用picker-view-column来设置选项。通过示例代码解释了组件的布局和样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

picker-view

嵌入页面的滚动选择器
在这里插入图片描述

注意：其中只可放置<picker-view-column/>组件，其他节点不会显示。

picker-view-column

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

例如：
效果展示

代码
index.wxml

<view>
  <view class='showView'>{
  
  {year}}年{
  
  {month}}月{
  
  {day}}日</view>
  <!-- 
    value 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。  
    indicator-style 设置选择器中间选中框的样式   
    indicator-class 设置选择器中间选中框的类名 
    mask-style 设置蒙层的样式
    ma