微信小程序picker-view、picker-view-column组件应用介绍与案例精讲

非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：

微信小程序picker-view、picker-view-column组件应用介绍与案例精讲      

picker-view、picker-view-column的使用

---

        picker-view 是一个嵌入页面的滚动选择器组件，支持多列选择，常用于日期、时间、省市区等复杂选择场景。与 picker 不同，picker-view 是直接嵌入页面中的，而不是从底部弹起。以下是一个 picker-view 的示例代码，展示了如何实现一个自定义的日期和时间选择器。

        示例代码如下：

        pickerView.wxml

<view class="w">
  <view class="title">{
  {year}}年{
  {month}}月{
  {day}}日{
  {isDaytime ? "白天" : "夜晚"}}</view>
  <picker-view indicator-style="height:50px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;" value="{
  {value}}" bindchange="bindchange">
    <picker-view-column>
      <view wx:for="{
  {yearArr}}" wx:for-index="index" wx:key="index" class="item">{
  {item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{
  {monthArr}}" wx:for-index="index" wx:key="index"  class="item">{
  {item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{
  {dayArr}}" wx:for-index="index" wx:key="index" class="item"&