uni-app uni-admin分页下拉框错位

uni-app uni-admin分页下拉框错位

操作步骤：

  • 新建uni-admin工程即可复现

预期结果：

  • 分页下拉选择框正常位置显示

实际结果：

  • 分页下拉选择框错位

bug描述：

HX版本为3.2.16.20211122，新建uni-admin项目后，若在vue3版本下运行，分页下拉框错位。若vue2版本运行则正常显示。

图片

Image 1 Image 2

项目信息

信息 描述
HX版本 3.2.16.20211122
项目类型 uni-admin
运行环境 vue2版本正常，vue3版本存在问题

更多关于uni-app uni-admin分页下拉框错位的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

此 bug 已修复，更新HBuilderX3.3.2+试试

更多关于uni-app uni-admin分页下拉框错位的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-admin在Vue3模式下与HBuilderX 3.2.16版本存在的兼容性问题。主要原因是该版本下uni-app框架对Vue3中部分组件的样式处理存在差异，导致<uni-pagination>组件内部的下拉选择器定位异常。

核心问题：下拉框的CSS position定位在Vue3编译模式下计算有误，使其脱离了正常的文档流，导致视觉上“错位”。

临时解决方案（二选一）：

  1. 降级运行模式：在项目manifest.json中，将项目的Vue版本切换回vue2。这是最直接的规避方法。
  2. 手动修复样式：在项目的公共CSS文件（如App.vue的style或全局样式文件）中添加以下样式规则，强制修正下拉框定位：
    /* 修复uni-admin分页下拉框在Vue3下错位 */
.uni-pagination .uni-select .uni-select__selector-box {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
}
回到顶部