亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序 picker-view 組件詳解及簡單實(shí)例

 更新時間:2017年01月10日 15:04:23   投稿:lqh  
這篇文章主要介紹了微信小程序 picker-view 組件詳解及簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下

picker-view

相關(guān)文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

實(shí)現(xiàn)效果圖:

picker_view

嵌入頁面的滾動選擇器

屬性名 類型 默認(rèn)值 說明
value Number Array   數(shù)組中的數(shù)字依次表示 picker-view 內(nèi)的 picker-view-colume 選擇的第幾項(xiàng)(下標(biāo)從 0 開始),數(shù)字大于 picker-view-column 可選項(xiàng)長度時,選擇最后一項(xiàng)。
indicator-style String   設(shè)置選擇器中間選中框的樣式
bindchange EventHandle   當(dāng)滾動選擇,value 改變時觸發(fā) change 事件,event.detail = {value: value};value為數(shù)組,表示 picker-view 內(nèi)的 picker-view-column 當(dāng)前選擇的是第幾項(xiàng)(下標(biāo)從 0 開始)

注意:其中只可放置<picker-view-column/>組件,其他節(jié)點(diǎn)不會顯示。

picker-view-column

僅可放置于<picker-view />中,其孩子節(jié)點(diǎn)的高度會自動設(shè)置成與picker-view的選中框的高度一致

示例代碼:

<view>
 <view>{{year}}年{{month}}月{{day}}日</view>
 <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
 <picker-view-column>
 <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
 </picker-view-column>
 <picker-view-column>
 <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
 </picker-view-column>
 <picker-view-column>
 <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
 </picker-view-column>
 </picker-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[1]]
 })
 }
})

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

相關(guān)文章

最新評論