小程序picker_表单组件picker-view

在上一节中我们讲了picker选择器组件，有时候我们希望滚动选择器不应该从底部弹起而是可以直接在页面上让用户进行选择。这个时候小程序提供了一个picker-view组件，picker-view是直接嵌入在页面上的选择器，下面让我们来看下官方文档中的属性：

可以看到picker-view给我们提供了很多属性，包括数组数字类型的value、indicator-style、indicator-class等等。下面让我们通过一个实例来看下：

<!--index.wxml-->
<view>
    <view>{{year}}年{{month}}月{{day}}日</view>
    <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="binChange">
        <picker-view-column>
            <view wx:for="{{years}}" wx:key="*this" style="line-height: 50px;">{{item}}年</view>
        </picker-view-column>
        <picker-view-column>
            <view wx:for="{{months}}" wx:key="*this" style="line-height: 50px;">{{item}}月</view>
        </picker-view-column>
        <picker-view-column>
            <view wx:for="{{days}}" wx:key="*this" style="line-height: 50px;">{{item}}日</view>    
        </picker-view-column>
    </picker-view>
</view>
//index.js
const date = new Date() //用于获取当前的日期和时间保存为初始值
const years = []
const months = []
const days = []
for (let i = 1990; i <= date.getFullYear(); i++) { //getFullYear()用来获取四位数的年份
    years.push(i)
}
for (let i = 1; i <= 12; i++) {
    months.push(i)
}
for (let i = 1; i <= 31; i ++) {
    days.push(i)
}
Page({
    data: {
        years: years,
        year: date.getFullYear(),
        months: months,
        month: 2,
        days: days,
        day: 2,
        value: [0, 1, 1],
    }
})

今天的内容就到这里了，我们下期再见。