W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
嵌入頁(yè)面的滾動(dòng)選擇器。
屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 | 最低版本 |
---|---|---|---|---|
value | NumberArray | 數(shù)組中的數(shù)字依次表示 picker-view 內(nèi)的 picker-view-column 選擇的第幾項(xiàng)(下標(biāo)從 0 開(kāi)始),數(shù)字大于 picker-view-column 可選項(xiàng)長(zhǎng)度時(shí),選擇最后一項(xiàng)。 | 1.0.0 | |
indicator-style | String | 設(shè)置選擇器中間選中框的樣式 | 1.0.0 | |
mask-style | String | 設(shè)置蒙層的樣式 | 1.0.0 | |
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 開(kāi)始 | 1.0.0 |
僅可放置于中,其孩子節(jié)點(diǎn)的高度會(huì)自動(dòng)設(shè)置成與picker-view的選中框的高度一致
<view class="container">
<view class="page-body">
<view class="page-section">
<view>
<view style="text-align: center;">{{year}}年{{month}}月{{day}}日</view>
<picker-view style="height: 750rpx" value="{{value}}" bindchange="bindChange">
<picker-view-column style="text-align: center;">
<view :for="{{years}}">{{item}}年</view>
</picker-view-column>
<picker-view-column style="text-align: center;">
<view :for="{{months}}">{{item}}月</view>
</picker-view-column>
<picker-view-column style="text-align: center;">
<view :for="{{days}}">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
</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)
}
Page({
data: {
years: years,
year: date.getFullYear(),
months: months,
month: 2,
days: days,
day: 2,
year: date.getFullYear(),
value: [9999, 1, 1],
},
bindChange: function (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]]
})
}
})
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: