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>
</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>
<picker-view
v-else-if="value && !isColumnEmpty"
:key="pickerKey"
@change="columnChange"
class="u-select__body__picker-view"
:style="pickerViewStyle"
:indicator-style="indicatorStyle"
:value="defaultSelector"
@pickstart="pickstart"
@pickend="pickend"
>
<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 class="u-line-1">{{ item1[labelName] }}</view>
<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>
</picker-view-column>
</picker-view>
@@ -172,6 +179,16 @@ export default {
debounce: {
type: Number,
default: 400
},
/** 选项行高(rpx)。App 端需与 indicator 同步,避免选中框错位 */
itemHeight: {
type: [Number, String],
default: 0
},
/** 可见行数,用于计算滚轮高度;需为奇数,选中行才能居中 */
visibleItemCount: {
type: [Number, String],
default: 5
}
},
data() {
@@ -225,7 +242,37 @@ export default {
},
isColumnEmpty() {
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: {
pickstart() {
+4 -5
View File
@@ -105,7 +105,8 @@
<!-- </view>-->
<!-- </div>-->
<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">
<text class="version-text">版本: {{ appVersion }}</text>
@@ -607,15 +608,13 @@ export default {
font-size: 36rpx;
}
::v-deep .u-select__body {
height: 560rpx;
::v-deep .u-select__header__title {
font-size: 36rpx;
}
::v-deep .u-select__body__picker-view__item,
::v-deep .u-line-1 {
height: 88rpx;
font-size: 40rpx;
line-height: 88rpx;
}
}
</style>