picker-view

基礎(chǔ)庫 1.0.0 開始支持本組件。

嵌入頁面的滾動(dòng)選擇器。

屬性說明

value 說明

value 為數(shù)字?jǐn)?shù)組, 數(shù)組中的數(shù)字依次表示 <picker-view /> 內(nèi)的 <picker-view-column /> 選擇的第幾項(xiàng)（下標(biāo)從 0 開始）

如果值大于 <picker-view-column /> 可選項(xiàng)長(zhǎng)度時(shí)，選擇最后一項(xiàng)。

效果示例

代碼示例

<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 tt:for="{{years}}">{{item}}年</view>
          </picker-view-column>
          <picker-view-column style="text-align: center;">
            <view tt:for="{{months}}">{{item}}月</view>
          </picker-view-column>
          <picker-view-column style="text-align: center;">
            <view tt: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]]
    });
  }
});