picker-view 选项太多的话，滚动选择数据，选中的项没有居中显示在中线

[lixun027]

发行方式

App

具体平台

Android

开发环境

Windows

项目创建方式

HBuilderX

依赖版本

uniapp 使用 HBuilderX工具最新版本创建的

问题描述

选中的年月日没有在一条线上

重现步骤

`

<picker-view class="picker-view-box" :indicator-style="'height: 80rpx;'" @change="onChange">


{{ year }} 年



01 月
02 月
03 月


01 日
02 日
03 日

<script setup lang="uts"> const years = [2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027,] const onChange = (e : UniPickerViewChangeEvent) => { console.log("e = ", e) } </script> <style lang="scss" scoped> .test-box { width: 100%; height: 400rpx; // background-color: aquamarine; .picker-view-box { width: 100%; height: 400rpx; box-sizing: border-box; display: flex; .picker-view-column-box { height: 400rpx; // background-color: #ffff00; box-sizing: border-box; .item { height: 80rpx; // border: 10rpx solid red; background-color: #FFE7FF; display: flex; align-items: center; justify-content: center; box-sizing: border-box; .text { line-height: 80rpx; text-align: center; // height: 100%; } } } } } </style>`

期望行为

<picker-view class="picker-view-box" :indicator-style="'height: 80rpx;'" @change="onChange">


{{ year }} 年

css
.item {
height: 80rpx;
}

实际行为

No response

截图或录屏

No response

[lixun027]

<template>
	<view class="test-box">
		<picker-view class="picker-view-box" :indicator-style="'height: 80rpx;'" @change="onChange">
			<picker-view-column class="picker-view-column-box">
				<view class="item" v-for="(year, index) in years" :key="index">
					<text class="text">{{ year }} 年</text>
				</view>
			</picker-view-column>
			<picker-view-column class="picker-view-column-box">
				<view class="item"><text class="text">01 月</text></view>
				<view class="item"><text class="text">02 月</text></view>
				<view class="item"><text class="text">03 月</text></view>
			</picker-view-column>
			<picker-view-column class="picker-view-column-box">
				<view class="item"><text class="text">01 日</text></view>
				<view class="item"><text class="text">02 日</text></view>
				<view class="item"><text class="text">03 日</text></view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

[lixun027]

<script setup lang="uts">
	const years = [2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027, 2025, 2026, 2027,]

	const onChange = (e : UniPickerViewChangeEvent) => {
		console.log("e = ", e)
	}
</script>

[lixun027]

<style lang="scss" scoped>
	.test-box {
		width: 100%;
		height: 400rpx;
		// background-color: aquamarine;

		.picker-view-box {
			width: 100%;
			height: 400rpx;
			box-sizing: border-box;
			display: flex;

			.picker-view-column-box {
				height: 400rpx;
				// background-color: #ffff00;
				box-sizing: border-box;

				.item {
					height: 80rpx;
					// border: 10rpx solid red;
					background-color: #FFE7FF;
					display: flex;
					align-items: center;
					justify-content: center;

					box-sizing: border-box;

					.text {
						line-height: 80rpx;
						text-align: center;
						// height: 100%;
					}
				}
			}
		}
	}
</style>

[lixun027]

以上是我的代码, 和 这个问题一样 #3957

[lixun027]

服了,看了几个小时,然后试了下 px,好了. height: 80rpx;' 改成 height: 40px;'
说到底,还是 uni 和 rpx单位适配有bug

[lixun027]

用uni app 半个月. 头发白了一大堆, 哎, 服了啊