微信小程序嵌入页面的滚动选择器 picker-view picker-view-column 组件

た入场券 2021-09-08 01:18 418阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

嵌入页面的滚动选择器。其中只可放置 [picker-view-column][]组件，其它节点不会显示。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">value</td> 
   <td align="left">Array.</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">indicator-style</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">设置选择器中间选中框的样式</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">indicator-class</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">设置选择器中间选中框的类名</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.1.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">mask-style</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">设置蒙层的样式</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.5.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">mask-class</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">设置蒙层的类名</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.5.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindchange</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">滚动选择时触发change事件，event.detail = {value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindpickstart</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当滚动选择开始时候触发事件</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.3.1</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindpickend</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当滚动选择结束时候触发事件</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.3.1</a></td> 
  </tr> 
 </tbody> 
</table>

**Bug & Tip**

1.  `tip`: 滚动时在iOS自带振动反馈，可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭

**示例代码**

[在开发者工具中预览效果][Link 1]

index.wxml

<view>
      <view>{
       {year}}年{
       {month}}月{
       {day}}日</view>
      <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{ {value}}" bindchange="bindChange">
        <picker-view-column>
          <view wx:for="{ {years}}" style="line-height: 50px">{
       {item}}年</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{ {months}}" style="line-height: 50px">{
       {item}}月</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{ {days}}" style="line-height: 50px">{
       {item}}日</view>
        </picker-view-column>
      </picker-view>
    </view>

index.js

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-la3oNkne-1622384995476)(image-20210529140123348.png)\]][img-la3oNkne-1622384995476_image-20210529140123348.png]

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

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[picker-view-column]: https://developers.weixin.qq.com/miniprogram/dev/component/picker-view-column.html
[Link 1]: https://developers.weixin.qq.com/s/YfbJZcmG6zYM
[img-la3oNkne-1622384995476_image-20210529140123348.png]: /images/20210716/82c4b5e807564cf299ba56306b6c76f5.png
[picker-view]: https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html