开发
API

picker-view

基础库 1.0.0 开始支持本组件。

嵌入页面的滚动选择器。

属性说明

属性名类型默认值必填说明最低支持版本
valueArray<number>详见下方说明1.0.0
indicator-stylestring设置选择器中间选中框的样式1.0.0
mask-stylestring设置蒙层的样式1.0.0
bindchangeFunction改变时触发1.0.0

value 说明

value 为数字数组, 数组中的数字依次表示 <picker-view /> 内的 <picker-view-column /> 选择的第几项(下标从 0 开始)

如果值大于 <picker-view-column /> 可选项长度时,选择最后一项。

效果示例

代码示例

开发者工具中预览

<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();
function range(start, end) {
  const arr = [];
  for (let i = start; i <= end; i++) {
    arr.push(i);
  }
  return arr;
}

Page({
  data: {
    years: range(1990, date.getFullYear()),
    months: range(1, 12),
    days: range(1, 31),
    year: date.getFullYear(),
    month: 1,
    day: 1,
    value: [1, 1, 1],
  },
  bindChange(event) {
    const val = event.detail.value;
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]],
    });
  },
});

扫码体验

请使用字节宿主APP扫码

Bug & Tip

暂无

点击纠错
评价此篇文档