小程序：嵌入页面的滚动选择器(picker-view)

代码Github地址

一. picker-view属性说明

其中只可放置<picker-view-column/>组件，其他节点不会显示

属性名	类型	默认值	说明
value	NumberArray	switch	数组中的数字对应每列默认选中第几行。数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-class	String		设置选择器中间选中框的类名
mask-class	String		设置蒙层的类名
bindchange	EventHandle		当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）

二. picker-view-column属性说明

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

可修改column的样式和选中框的样式

三. 代码

• wxml

<view>

  <picker-view class="picker" indicator-class="indicator" value="{{value}}" bindchange="bindChange">

    <picker-view-column class="column">
      <view wx:for="{{years}}">{{item}}年</view>
    </picker-view-column>

    <picker-view-column class="column">
      <view wx:for="{{months}}">{{item}}月</view>
    </picker-view-column>

    <picker-view-column class="column">
      <view wx:for="{{days}}">{{item}}日</view>
    </picker-view-column>
    
  </picker-view>

  <view class="result">{{year}}年{{month}}月{{day}}日</view>

</view>

• wxss

.picker {
  background-color: yellow;
  width: 80%;
  height: 200px;
  margin-top: 50px;
  margin-left: 10%;
}

.indicator {
  height: 100rpx;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

.column {
  font-size: 24rpx;
  color: red;
  text-align: center;
  line-height: 100rpx;
}

.result {
  text-align: center;
  margin-top: 50px;
}

• js

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: years[0],
    months: months,
    month: 2,
    days: days,
    day: 2,
    value: [0, 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]]
    })
  }
})