以下將展示微信小程序之表單組件picker-view源碼官方組件能力裙士，組件樣式僅供參考颜阐，開發(fā)者可根據(jù)自身需求定義組件樣式挖息，具體屬性參數(shù)詳見小程序開發(fā)文檔卑雁。
功能描述：
嵌入頁面的滾動選擇器拓售。其中只可放置 picker-view-column組件窥摄，其它節(jié)點不會顯示。
屬性說明：
Bug& Tip
1.tip:滾動時在 iOS 自帶振動反饋础淤，可在系統(tǒng)設(shè)置 -> 聲音與觸感 -> 系統(tǒng)觸感反饋中關(guān)閉
示例代碼：
JAVASCRIPT：
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({
? onShareAppMessage() {
? ? return {
? ? ? title: 'picker-view',
? ? ? path: 'page/component/pages/picker-view/picker-view'
? ? }
? },
? data: {
? ? years,
? ? year: date.getFullYear(),
? ? months,
? ? month: 2,
? ? days,
? ? day: 2,
? ? value: [9999, 1, 1],
? ? isDaytime: true,
? },
? bindChange(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]],
? ? ? isDaytime: !val[3]
? ? })
? }
})
WXML：
<view class="container">
? <view class="page-body">
? ? <view class="selected-date">{{year}}年{{month}}月{{day}}日{(diào){isDaytime ? "白天" : "夜晚"}}</view>
? ? <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
? ? ? <picker-view-column>
? ? ? ? <view wx:for="{{years}}" wx:key="{{years}}" style="line-height: 50px; text-align: center;">{{item}}年</view>
? ? ? </picker-view-column>
? ? ? <picker-view-column>
? ? ? ? <view wx:for="{{months}}" wx:key="{{months}}" style="line-height: 50px; text-align: center;">{{item}}月</view>
? ? ? </picker-view-column>
? ? ? <picker-view-column>
? ? ? ? <view wx:for="{{days}}" wx:key="{{days}}" style="line-height: 50px; text-align: center;">{{item}}日</view>
? ? ? </picker-view-column>
? ? ? <picker-view-column>
? ? ? ? <view class="icon-container">
? ? ? ? ? <image class="picker-icon" src="../lib/daytime.png" />
? ? ? ? </view>
? ? ? ? <view class="icon-container">
? ? ? ? ? <image class="picker-icon" src="../lib/night.png" />
? ? ? ? </view>
? ? ? </picker-view-column>
? ? </picker-view>
? </view>
</view>
版權(quán)聲明：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理崭放、上傳，如涉及版權(quán)問題鸽凶，請聯(lián)系我們第一時間處理币砂。
原文鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
