uni-app nvue中flex居中的图片出现bug

uni-app nvue中flex居中的图片出现bug

开发环境 版本号 项目创建方式
Windows 10 HBuilderX
HBuilderX 3.1.0
Android 11
小米
8note

操作步骤：

随便写个flex垂直居中的图片，然后加载看效果，或者将该页面做成那种透明的弹窗形式，效果很明显

预期结果：

加载较顺畅

实际结果：

加载显得卡顿

bug描述：

在nvue中如果有一张flex居中的图片，图片会先在屏幕上半部加载出现，然后闪一下出现在屏幕正中间，并且即使图片增加了渐显动画，依旧如此；可能导致的原因是nvue的加载问题，加载不流畅，并且加载时会初始一个高度，大概屏幕的三分之一，然后高度才会变成全屏；

测试.zip


更多关于uni-app nvue中flex居中的图片出现bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

请提供简单、可稳定复现、能直接运行的完整示例（上传附件），方便我们快速排查问题哦。 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

更多关于uni-app nvue中flex居中的图片出现bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


关注，等待问题补充

已上传附件，不知道你们那边会不会复现，可以尝试多热更新几次，目前我这边性能不怎么好的手机会直接出现先在屏幕上半部分加载一闪而过，我自己的手机目前是非常明显的闪动

可以把下面的文字去掉，然后多热更新几次，有时甚至可以看到四周的红色边框一瞬间由一半加载变成全屏的

回复 突然好想你: 和之前版本对比，未发现区别

回复 DCloud_UNI_GSQ: 应该算一直存在的，就是如果nvue里的list加载样式种类比较多时，会出现整体flex:1会先加载三分之一再加载变成全屏高的问题，我这个项目太难拆开了，等我拆完弄一个示例再发上来

回复 突然好想你: 尝试在图片 load 事件后再显示

回复 DCloud_UNI_GSQ: 目前解决是通过这样的，但是在某些性能不好的手机上显示空白的时间就变得久了一点了；这个也不是个很大的问题，目前先这样吧，也没太大影响

回复 DCloud_UNI_GSQ: 我想要的就是这个属性render-whole；虽然还没尝试，但是算是解决了

这个现象确实是nvue在Android平台上的一个已知问题，主要是由于flex布局和图片加载机制的配合问题导致的。

主要原因分析：

  1. nvue在Android上使用原生渲染，flex布局计算和图片加载是异步进行的
  2. 图片加载完成前，flex容器会先按默认高度渲染
  3. 图片加载完成后触发重新布局，导致视觉上的"闪动"效果

临时解决方案：

  1. 给图片容器设置固定高度，避免flex计算时的跳动
.container {
  height: 具体高度值;
}
  1. 使用绝对定位替代flex居中
.container {
  position: relative;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  1. 给图片添加初始透明度动画
.image {
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}
[@keyframes](/user/keyframes) fadeIn {
  to { opacity: 1; }
}
回到顶部