百度智能小程序 滾動(dòng)選擇器

2020-08-28 15:41 更新

picker-view 滾動(dòng)選擇器

解釋:可嵌頁面的滾動(dòng)選擇器

屬性說明

屬性名 類型 默認(rèn)值 必填 說明

value

Array.<number>

[]

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

indicator-style

String

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

indicator-class

String

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

mask-style

String

設(shè)置蒙層的樣式

mask-class

String

設(shè)置蒙層的類名

bindchange

EventHandle

當(dāng)滾動(dòng)選擇,value 改變時(shí)觸發(fā) change 事件,event.detail = {value: value};value 為數(shù)組,表示 picker-view 內(nèi)的 picker-view-column 當(dāng)前選擇的是第幾項(xiàng)(下標(biāo)從 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é)點(diǎn)不會(huì)顯示。


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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)