字节跳动小程序开发组件文档 picker-view

由 卓别林 创建, 最后一次修改 2019-08-09

嵌入页面的滚动选择器。

属性名 类型 默认值 说明 最低版本
value NumberArray 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。 1.0.0
indicator-style String 设置选择器中间选中框的样式 1.0.0
mask-style String 设置蒙层的样式 1.0.0
bindchange EventHandle 当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始 1.0.0

picker-view-column


仅可放置于中,其孩子节点的高度会自动设置成与picker-view的选中框的高度一致

示例

开发者工具中预览


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


以上内容是否对您有帮助:
二维码
建议反馈
二维码