048 ∞ 表单组件：picker-view

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了picker，本次来学习picker-view。

picker-view，嵌入页面的滚动选择器，属性：

属性名	类型	说明	最低版本
value	NumberArray	数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style	String	设置选择器中间选中框的样式
indicator-class	String	设置选择器中间选中框的类名	1.1.0
mask-style	String	设置蒙层的样式	1.5.0
mask-class	String	设置蒙层的类名	1.5.0
bindchange	EventHandle	当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）

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

picker-view-column，仅可放置于<picker-view />中。

其孩子节点的高度会自动设置成与picker-view的选中框的高度一致。

index.wxml：

1. <view>
   
2.   <view>{{year}}年{{month}}月{{day}}日</view>
   
3.   <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
   
4.     <picker-view-column>
   
5.       <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
   
6.     </picker-view-column>
   
7.     <picker-view-column>
   
8.       <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
   
9.     </picker-view-column>
   
10.     <picker-view-column>
    
11.       <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
    
12.     </picker-view-column>
    
13.   </picker-view>
    
14. </view>

复制代码

index.js：

1. const date = new Date()
   
2. const years = []
   
3. const months = []
   
4. const days = []
   
5. 
   
6. for (let i = 1990; i <= date.getFullYear(); i++) {
   
7.   years.push(i)
   
8. }
   
9. 
   
10. for (let i = 1; i <= 12; i++) {
    
11.   months.push(i)
    
12. }
    
13. 
    
14. for (let i = 1; i <= 31; i++) {
    
15.   days.push(i)
    
16. }
    
17. 
    
18. Page({
    
19.   data: {
    
20.     years: years,
    
21.     year: date.getFullYear(),
    
22.     months: months,
    
23.     month: 2,
    
24.     days: days,
    
25.     day: 2,
    
26.     year: date.getFullYear(),
    
27.     value: [9999, 1, 1],
    
28.   },
    
29.   bindChange: function (e) {
    
30.     const val = e.detail.value
    
31.     this.setData({
    
32.       year: this.data.years[val[0]],
    
33.       month: this.data.months[val[1]],
    
34.       day: this.data.days[val[2]]
    
35.     })
    
36.   }
    
37. })

复制代码

---

课后作业


1、picker-view-column仅可放置于<picker-view />中?（T/F）



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

c调小白