微信小程序自定义picker，选项内容两行展示

小程序开发过程中，有遇到picker选项内容两行展示，组件用的是vant，但是扒了官方文档，并不支持多行展示，就用微信开发文档中自带的表单组件：

picker-view   
picker-view-column

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
效果图：

wxml代码：

	
    	取消
        确认
	
    
    	{{item.showTime}}{{item.activityDateDesc}}			
    

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选择器选中的值（不是下标）