微信小程序 picker-view 組件詳解及簡單實(shí)例
更新時間:2017年01月10日 15:04:23 投稿:lqh
這篇文章主要介紹了微信小程序 picker-view 組件詳解及簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下
picker-view
相關(guān)文章:
實(shí)現(xiàn)效果圖:
嵌入頁面的滾動選擇器
屬性名 | 類型 | 默認(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)文章
JavaScript?定時器關(guān)鍵點(diǎn)及使用場景解析
這篇文章主要為大家介紹了JavaScript?定時器關(guān)鍵點(diǎn)及使用場景解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01微信小程序 圖片寬度自適應(yīng)的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 圖片寬度自適應(yīng)的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-04-04微信小程序 (七)數(shù)據(jù)綁定詳細(xì)介紹
這篇文章主要介紹了微信小程序數(shù)據(jù)綁定詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09