从新手的困惑，到Picker和Picker-View成为小程序中的宠儿！

2023-10-26 16:07:04

作为一名刚刚接触小程序开发的新手，我经常被Picker和Picker-View这两个组件搞得晕头转向。它们到底有什么区别？该如何使用？优缺点又是什么呢？经过一番研究，终于对Picker和Picker-View有了比较深入的了解。现在，我就来分享一下我的心得体会，希望对各位新手朋友有所帮助。

Picker和Picker-View都是小程序中的选择器组件，可以用于在多个选项中选择一个或多个值。Picker组件是一个基本的单列选择器，而Picker-View组件是一个多列选择器，可以同时选择多个值。

Picker组件

Picker组件的用法非常简单，只需要在组件中指定选项数组和当前选中的值即可。例如：

<picker range="{{range}}" value="{{value}}" bindchange="bindChange">
  <view class="picker">
    <view class="picker-item" wx:for="{{range}}" wx:key="*this">{{item}}</view>
  </view>
</picker>

其中，range属性指定选项数组，value属性指定当前选中的值，bindChange属性指定选择器发生改变时触发的事件处理函数。

Picker-View组件

Picker-View组件的用法与Picker组件类似，但它多了几个属性，可以用于控制列数、显示模式等。例如：

<picker-view indicator-style="height: 50px;" value="{{value}}" bindchange="bindChange">
  <picker-view-column>
    <view class="picker-item" wx:for="{{range1}}" wx:key="*this">{{item}}</view>
  </picker-view-column>
  <picker-view-column>
    <view class="picker-item" wx:for="{{range2}}" wx:key="*this">{{item}}</view>
  </picker-view-column>
</picker-view>