uni-app 使用uni-table加载框不居中问题反馈

uni-app 使用uni-table加载框不居中问题反馈

开发环境 版本号 项目创建方式
Mac 12.1 HBuilderX

操作步骤：

1、设定ui-table里class为uni-table-scroll的高度
2、增加超过ui-table高度的uni-tr
3、显示loading

预期结果：

loading框居中

实际结果：

因uni-table里面的uni-table-scroll高度固定，而table过高，导致loading参照table而不居中。

bug描述：

使用flex布局uni-table时，将底部分页栏固定，uni-table占剩余高度，就会导致uni-table高度固定，而里面的内容会上下滚动。
整个布局没有问题，但是加载框不居中，因为加载框是参照table布局的，不是参照的uni-table-scroll。 导致内容高度变化时不会居中显示。

建议loading框参照uni-table-scroll居中。

Image Image


更多关于uni-app 使用uni-table加载框不居中问题反馈的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 使用uni-table加载框不居中问题反馈的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 开发时，如果你遇到 uni-table 加载框不居中的问题，可能是由于样式或布局设置不当导致的。以下是一些可能的原因和解决方案：

1. 检查 uni-table 的父容器样式

确保 uni-table 的父容器设置了正确的样式，特别是 display: flex 和 justify-content: center，以确保内容居中。

<view class="container">
  <uni-table>
    <!-- 表格内容 -->
  </uni-table>
</view>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 确保容器高度占满整个视口 */
}

2. 检查 uni-table 自身的样式

如果 uni-table 自身有固定的宽度或高度，可能会导致加载框不居中。你可以尝试调整 uni-table 的样式，使其能够自适应父容器的大小。

uni-table {
  width: 100%; /* 使表格宽度自适应 */
  max-width: 800px; /* 设置最大宽度 */
  margin: 0 auto; /* 水平居中 */
}

3. 使用 uni-load-more 组件

如果你使用的是 uni-load-more 组件来显示加载框，确保该组件的样式设置正确。

<uni-load-more status="loading"></uni-load-more>

uni-load-more {
  display: flex;
  justify-content: center;
  align-items: center;
}

4. 检查全局样式

有时全局样式可能会影响到 uni-table 的布局。检查是否有全局样式覆盖了 uni-table 的默认样式，特别是 margin 和 padding。

5. 使用 uni.showLoading API

如果你是通过 uni.showLoading API 来显示加载框，确保在调用时设置了 title 和 mask 参数。

uni.showLoading({
  title: '加载中...',
  mask: true
});

6. 调试工具

使用浏览器的开发者工具或 uni-app 的调试工具，检查 uni-table 及其父容器的样式和布局，找出可能导致加载框不居中的问题。

7. 更新 uni-app 版本

如果你使用的是较旧版本的 uni-app，可能存在一些已知的布局问题。尝试更新到最新版本，看看问题是否得到解决。

8. 自定义加载框

如果以上方法都无法解决问题，你可以考虑自定义一个加载框，使用 uni.showModal 或 uni.showToast 来替代默认的加载框。

uni.showToast({
  title: '加载中...',
  icon: 'loading',
  duration: 2000
});
回到顶部