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

本文链接：https://blog.youkuaiyun.com/wang_59881/article/details/124659872

本文档介绍如何在微信小程序中使用picker组件实现多行展示效果，由于vant组件库不支持，改用微信官方的picker-view和picker-view-column组件。通过调整样式和事件处理，实现了选择项两行展示，并详细说明了各部分代码的作用，包括WXML、WXSS和JS部分。同时，解释了如何获取picker选中的具体值而非下标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序开发过程中，有遇到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选择器选中的值（不是下标）