微信小程式自定義picker，選項内容兩行展示

小程式開發過程中，有遇到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選擇器選中的值（不是下标）