开发
API

picker-view-column

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

需要配合 <picker-view /> 使用,作为 picker-view 其中的一列, 其高度会自动设置成与 <picker-view /> 的高度保持一致。

效果示例

请参考 <picker-view />

扫码体验

请参考 <picker-view />

代码示例

完整示例,请参考 <picker-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>
Page({
  data: {
    years: [2010, 2011],
    year: 2010,
    months: [1, 2, 3, 4, 5, 6],
    month: 1,
    days: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
    day: 1,
    value: [1, 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]],
    });
  },
});

Bug & Tip

  • Tip:仅可放置于 <picker-view /> 中使用
点击纠错
评价此篇文档