小程序开发过程中，有遇到picker选项内容两行展示，组件用的是vant，但是扒了官方文档，并不支持多行展示，就用微信开发文档中自带的表单组件：
picker-view
picker-view-column
文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
效果图：
wxml代码：
<picker-view indicator-style="height: 60px;" bindchange="bindChange">
<view class='btns'>
<view bindtap="onClose">取消</view>
<view bindtap="onConfirm">确认</view>
</view>
<picker-view-column class="pickerColumn">
<view wx:for="{{data.activityDateJson}}" class="picketText">{{item.showTime}}<view>{{item.activityDateDesc}}</view></view>
</picker-view-column>
</picker-view>
wxss
picker-view {
height: 500rpx;
}
// “取消，确定”按钮的样式
picker-view .btns{
display: flex;
width: 94%;
padding: 0 25rpx;
height: 100rpx;
line-height: 100rpx;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
border-bottom: 1rpx solid #eee;
z-index: 10;
}
// 顶部按钮高度是100rpx，absolute是不占据文档流的，所以要给顶部按钮保留出高度
picker-view-column{
margin-top: 100rpx;
}
// picker内容的样式
picker-view-column .picketText{
line-height: 60rpx;
height: 120rpx !important;
overflow: auto;
text-align: center;
color: #000;
}
js，后端返回的格式
activityDateJson:[
{showTime:‘’,activityDateDesc:‘’}
]
data：{
session: '请选择参与场次', //场次
activityDateJson: [], // picker展示的数组
val:0 // 默认选中数据的第一条数据
},
// 滚动选择时触发的change事件
bindChange: function (e) {
const val = e.detail.value
// val:选中的下标
this.setData({
session: this.data.activityDateJson[val].showTime,
val:val // 将选中的下标赋值到data里
})
},
// 点击“取消”的事件
onClose(){
this.setData({
showPopup: false // 这个是弹窗的显示隐藏，例子的wxml里没有写弹窗，这个可以忽略，“确定”事件里面的也是
})
},
// 点击“确定”的事件
onConfirm(e) {
this.setData({
session: this.data.activityDateJson[this.data.val].showTime, // 默认选择下标为0的数据
showPopup: false
})
},
picker中的value，默认的是选择的下标值（从0 开始），如果想要获取picker选中的值（比如选中的值为id），可以参考这篇
微信小程序获取picker选择器选中的值（不是下标）
