uni-app android Nvue 点video全屏再点返回 nvue中的waterfall组件样式乱了

uni-app android Nvue 点video全屏再点返回 nvue中的waterfall组件样式乱了

示例代码：

已上传附件

操作步骤：

  1. 点video全屏
  2. 再点返回退出全屏
  3. nvue中的waterfall组件样式乱了

预期结果：

video退出全屏 waterfall组件不变

实际结果：

video退出全屏 waterfall组件样式乱了

bug描述：

android Nvue, 点video全屏，再点返回退出全屏，nvue中的waterfall组件样式乱了
代码已经上传附件,
图1，是正常样式
图2，是video全屏后，再退出全屏后的样式 （好像图片被放大了）

全屏后再退出全屏，waterfall下的cell的宽度被放大了，退出全屏后 竖屏 的宽度好像是 横屏的值

项目信息 描述
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 10.13.6
HBuilderX类型 正式
HBuilderX版本号 3.2.12
手机系统 Android
手机系统版本号 Android 4.4
手机厂商 smartisan
手机机型 T1
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app android Nvue 点video全屏再点返回 nvue中的waterfall组件样式乱了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

waterfall组件样式乱了的问题请使用HX3.2.14测试试下

更多关于uni-app android Nvue 点video全屏再点返回 nvue中的waterfall组件样式乱了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我刚试了3.2.14.20211112-alpha 不行

遇到同样问题

试试版本 3.2.15.20211120

这是一个已知的 Android nvue 平台兼容性问题。当 video 组件全屏时，系统会强制横屏，退出全屏后 waterfall 组件的布局计算可能出现异常。

原因分析：

  1. video 全屏触发横屏布局
  2. 退出全屏后，waterfall 的 cell 宽度可能未正确重新计算
  3. Android 4.4 的 WebView 内核较旧，对布局重排支持不完善

临时解决方案：

  1. 强制重新渲染：在 video 的 @fullscreenchange 事件中，手动触发 waterfall 重新计算
onFullscreenChange(e) {
  if (!e.detail.fullScreen) {
    // 退出全屏后强制更新
    this.$nextTick(() => {
      // 可以尝试重置 waterfall 数据或触发重新渲染
    })
  }
}
  1. 使用 v-if 重新挂载：退出全屏后短暂隐藏再显示 waterfall
<waterfall v-if="showWaterfall" ...>
回到顶部