fix: 修复登录环境选择器选中框错位

This commit is contained in:
2026-10-31 20:41:20 +08:00
parent 81618150ab
commit 0710e7cccf
2 changed files with 55 additions and 9 deletions
+51 -4
View File
@@ -46,20 +46,27 @@
></u-icon> ></u-icon>
</view> </view>
<view v-if="loading" class="u-select__loading">搜索中...</view> <view v-if="loading" class="u-select__loading">搜索中...</view>
<view class="u-select__body"> <view class="u-select__body" :style="hasCustomItemHeight ? bodyStyle : null">
<view v-if="isColumnEmpty && !loading" class="u-select__empty">无匹配选项</view> <view v-if="isColumnEmpty && !loading" class="u-select__empty">无匹配选项</view>
<picker-view <picker-view
v-else-if="value && !isColumnEmpty" v-else-if="value && !isColumnEmpty"
:key="pickerKey" :key="pickerKey"
@change="columnChange" @change="columnChange"
class="u-select__body__picker-view" class="u-select__body__picker-view"
:style="pickerViewStyle"
:indicator-style="indicatorStyle"
:value="defaultSelector" :value="defaultSelector"
@pickstart="pickstart" @pickstart="pickstart"
@pickend="pickend" @pickend="pickend"
> >
<picker-view-column v-for="(item, index) in columnData" :key="'col-' + pickerKey + '-' + index"> <picker-view-column v-for="(item, index) in columnData" :key="'col-' + pickerKey + '-' + index">
<view class="u-select__body__picker-view__item" v-for="(item1, index1) in item" :key="item1[valueName] != null ? item1[valueName] : index1"> <view
<view class="u-line-1">{{ item1[labelName] }}</view> class="u-select__body__picker-view__item"
:style="hasCustomItemHeight ? itemStyle : null"
v-for="(item1, index1) in item"
:key="item1[valueName] != null ? item1[valueName] : index1"
>
<view class="u-line-1" :style="hasCustomItemHeight ? itemStyle : null">{{ item1[labelName] }}</view>
</view> </view>
</picker-view-column> </picker-view-column>
</picker-view> </picker-view>
@@ -172,6 +179,16 @@ export default {
debounce: { debounce: {
type: Number, type: Number,
default: 400 default: 400
},
/** 选项行高(rpx)。App 端需与 indicator 同步,避免选中框错位 */
itemHeight: {
type: [Number, String],
default: 0
},
/** 可见行数,用于计算滚轮高度;需为奇数,选中行才能居中 */
visibleItemCount: {
type: [Number, String],
default: 5
} }
}, },
data() { data() {
@@ -225,7 +242,37 @@ export default {
}, },
isColumnEmpty() { isColumnEmpty() {
return !this.columnData || !this.columnData.length || !this.columnData[0] || !this.columnData[0].length; return !this.columnData || !this.columnData.length || !this.columnData[0] || !this.columnData[0].length;
} },
hasCustomItemHeight() {
return Number(this.itemHeight) > 0;
},
itemHeightRpx() {
return Number(this.itemHeight) || 70;
},
itemHeightPx() {
return uni.upx2px(this.itemHeightRpx);
},
visibleCount() {
const n = Number(this.visibleItemCount) || 5;
return n % 2 === 0 ? n + 1 : n;
},
indicatorStyle() {
if (!this.hasCustomItemHeight) return '';
return `height: ${this.itemHeightPx}px;`;
},
itemStyle() {
return {
height: `${this.itemHeightPx}px`,
lineHeight: `${this.itemHeightPx}px`,
};
},
pickerViewStyle() {
if (!this.hasCustomItemHeight) return null;
return { height: `${this.itemHeightPx * this.visibleCount}px` };
},
bodyStyle() {
return this.pickerViewStyle;
},
}, },
methods: { methods: {
pickstart() { pickstart() {
+4 -5
View File
@@ -105,7 +105,8 @@
<!-- </view>--> <!-- </view>-->
<!-- </div>--> <!-- </div>-->
<u-select class="login-env-picker" v-model="showApiUrlPicker" :list="apiUrlList" :default-value="apiUrlDefaultIndex" <u-select class="login-env-picker" v-model="showApiUrlPicker" :list="apiUrlList" :default-value="apiUrlDefaultIndex"
title="选择服务器" @confirm="onApiUrlConfirm" @cancel="showApiUrlPicker = false"></u-select> title="选择服务器" :show-search="false" :item-height="88" :visible-item-count="5"
@confirm="onApiUrlConfirm" @cancel="showApiUrlPicker = false"></u-select>
<!-- 版本信息显示 --> <!-- 版本信息显示 -->
<view class="version-info"> <view class="version-info">
<text class="version-text">版本: {{ appVersion }}</text> <text class="version-text">版本: {{ appVersion }}</text>
@@ -607,15 +608,13 @@ export default {
font-size: 36rpx; font-size: 36rpx;
} }
::v-deep .u-select__body { ::v-deep .u-select__header__title {
height: 560rpx; font-size: 36rpx;
} }
::v-deep .u-select__body__picker-view__item, ::v-deep .u-select__body__picker-view__item,
::v-deep .u-line-1 { ::v-deep .u-line-1 {
height: 88rpx;
font-size: 40rpx; font-size: 40rpx;
line-height: 88rpx;
} }
} }
</style> </style>