百度智能小程序 滾動選擇器

2020-08-28 15:41 更新

picker-view 滾動選擇器

解釋:可嵌頁面的滾動選擇器

屬性說明

屬性名 類型 默認值 必填 說明

value

Array.<number>

[]

數(shù)組中的數(shù)字依次表示 picker-view 內(nèi)的 picker-view-colume 選擇的第幾項(下標從 0 開始),數(shù)字大于 picker-view-column 可選項長度時,選擇最后一項。

indicator-style

String

設(shè)置選擇器中間選中框的樣式

indicator-class

String

設(shè)置選擇器中間選中框的類名

mask-style

String

設(shè)置蒙層的樣式

mask-class

String

設(shè)置蒙層的類名

bindchange

EventHandle

當滾動選擇,value 改變時觸發(fā) change 事件,event.detail = {value: value};value 為數(shù)組,表示 picker-view 內(nèi)的 picker-view-column 當前選擇的是第幾項(下標從 0 開始)

示例 

在開發(fā)者工具中打開


代碼示例

<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/>組件,其他節(jié)點不會顯示。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號