百度智能小程序 滚动选择器

2020-08-28 15:41 更新

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 开始)

示例 

在开发者工具中打开


代码示例

<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>

Bug & Tip

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号