fix: 修复登录环境选择器选中框错位
This commit is contained in:
@@ -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() {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user