代码Github地址

一. picker-view属性说明

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

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

原著是一个有趣的人,若有侵权,请通知删除