picker-view 滚动选择器

解释:可嵌页面的滚动选择器

# 属性说明

属性名 类型 默认值 必填 说明
value Array.<number> [] 数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。
indicator-style String 设置选择器中间选中框的样式
indicator-class String 设置选择器中间选中框的类名
mask-style String 设置蒙层的样式
mask-class String 设置蒙层的类名
bindchange EventHandle 当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value 为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例

    <view class="wrap">
        <view class="card-area">
            <view class="selected-date">{{year}}年{{month}}月{{day}}日</view>
            <picker-view  
                indicator-style ="color: #74fa7d"
                mask-class="maskStyle"
                style="width: 100%;
                height: 300px;"
                value="{{value}}"
                bindchange="bindChange">
                <picker-view-column>
                    <view s-for="item in years" class="item">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view s-for="item in months" class="item">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view s-for="item in days" class="item">{{item}}日</view>
                </picker-view-column>
            </picker-view>
        </view>
    </view>
    
    const date = new Date()
    const years = []
    const months = []
    const days = []
    
    for (let i = 1990; i <= date.getFullYear(); i++) {
        years.push(i)
    }
    
    for (let i = 1; i <= 12; i++) {
        months.push(i)
    }
    
    for (let i = 1; i <= 31; i++) {
        days.push(i)
    }
    
    let app = getApp();
    
    Page({
        data: {
            years,
            year: date.getFullYear(),
            months,
            month: 2,
            days,
            day: 2,
            value: [9999, 1, 1]
        },
        bindChange(e) {
            const val = e.detail.value
            this.setData({
                year: this.data.years[val[0]],
                month: this.data.months[val[1]],
                day: this.data.days[val[2]]
            })
        }
    });
    

    # Bug & Tip

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