微信小程序 picker-view 組件詳解及簡(jiǎn)單實(shí)例
更新時(shí)間：2017年01月10日 15:04:23 投稿：lqh
這篇文章主要介紹了微信小程序 picker-view 組件詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下
picker-view
相關(guān)文章：
實(shí)現(xiàn)效果圖：
嵌入頁(yè)面的滾動(dòng)選擇器
| 屬性名 | 類(lèi)型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| value | Number Array | 數(shù)組中的數(shù)字依次表示 picker-view 內(nèi)的 picker-view-colume 選擇的第幾項(xiàng)（下標(biāo)從 0 開(kāi)始），數(shù)字大于 picker-view-column 可選項(xiàng)長(zhǎng)度時(shí)，選擇最后一項(xiàng)。 | |
| indicator-style | 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 開(kāi)始） |
注意：其中只可放置<picker-view-column/>組件，其他節(jié)點(diǎn)不會(huì)顯示。
picker-view-column
僅可放置于<picker-view />中，其孩子節(jié)點(diǎn)的高度會(huì)自動(dòng)設(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]]
})
}
})
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
您可能感興趣的文章:
- 微信小程序自定義可搜索的picker組件示例詳解
- 微信小程序自定義yPicker組件實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能
- 微信小程序picker組件兩列關(guān)聯(lián)使用方式
- 微信小程序picker組件關(guān)于objectArray數(shù)據(jù)類(lèi)型的綁定方法
- 微信小程序picker組件簡(jiǎn)單用法示例【附demo源碼下載】
- 微信小程序picker組件下拉框選擇input輸入框的實(shí)例
- 微信小程序 picker 組件詳解及簡(jiǎn)單實(shí)例
- 微信小程序使用picker組件出現(xiàn)的問(wèn)題探究
相關(guān)文章
詳解Anyscript開(kāi)發(fā)指南繞過(guò)typescript類(lèi)型檢查
這篇文章主要為大家介紹了詳解Anyscript開(kāi)發(fā)指南繞過(guò)typescript類(lèi)型檢查，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Qiankun Sentry 監(jiān)控異常上報(bào)無(wú)法自動(dòng)區(qū)分項(xiàng)目解決
這篇文章主要為大家介紹了Qiankun Sentry 監(jiān)控異常上報(bào)無(wú)法自動(dòng)區(qū)分項(xiàng)目解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了微信小程序 支付功能（前端）的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-05-05
Javascript 常見(jiàn)的高階函數(shù)詳情
這篇文章主要介紹了Javascript 常見(jiàn)的高階函數(shù)的相關(guān)資料，高階函數(shù)，英文叫 Higher Order function。一個(gè)函數(shù)可以接收另外一個(gè)函數(shù)作為參數(shù)，這種函數(shù)就叫做高階函數(shù),需要的朋友可以參考一下2021-09-09
js實(shí)現(xiàn)兔年轉(zhuǎn)圈圈動(dòng)畫(huà)示例
這篇文章主要為大家介紹了js實(shí)現(xiàn)兔年轉(zhuǎn)圈圈動(dòng)畫(huà)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
在JavaScript中所有的異常都是Error對(duì)象，遇到異常就會(huì)拋出一個(gè)Error對(duì)象,這個(gè)對(duì)象中包含錯(cuò)誤的描述信息，通過(guò)JavaScript提供的異常處理語(yǔ)句,我們可以用結(jié)構(gòu)化的方式來(lái)捕捉發(fā)生的錯(cuò)誤,讓異常處理代碼與核心業(yè)務(wù)代碼實(shí)現(xiàn)分離,需要的朋友可以參考一下2021-12-12
微信小程序 圖片加載（本地，網(wǎng)路）實(shí)例詳解
這篇文章主要介紹了微信小程序 圖片加載（本地，網(wǎng)路）實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要為大家介紹了使用pnpm包管理器替代npm及yarn的命令示例使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
微信小程序獲取用戶openId的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序獲取用戶openId的實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序 自定義創(chuàng)建詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-10-10