字節(jié)跳動小程序開發(fā)組件文檔 picker-view

嵌入頁面的滾動選擇器。

picker-view-column

僅可放置于中，其孩子節(jié)點的高度會自動設置成與picker-view的選中框的高度一致

示例

開發(fā)者工具中預覽

<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]]
		})
	}
})