uni-app list滑动组件下 安卓正常高度上下切换 ios系统样式高度混乱

uni-app list滑动组件下 安卓正常高度上下切换 ios系统样式高度混乱

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 windows 10
HBuilderX 正式
HBuilderX版本号 3.1.18
手机系统 iOS
手机版本号 iOS 12.0
手机厂商 苹果
手机机型 11
页面类型 nvue
打包方式 离线
项目创建方式 HBuilderX

操作步骤:

问题已描述,项目demo已经上传附件

预期结果:

问题已描述,项目demo已经上传附件

实际结果:

问题已描述,项目demo已经上传附件

bug描述:

安卓手机正常没问题(nvue uniapp模式),动态获取高度 上下滑动正常展示,ios手机同样方法获取高度,在苹果5 苹果11上都测试同样问题,最开始加载正常高度,下滑或下滑后样式混乱,每次滑动都会递增高度或者递减高度。导致一个页面出现多个视频同时展现的情况。劳烦给出解决方案 正对ios端做出兼容。 之前有看过提过类似问题,看已经修复此问题,不清楚现在这个问题是否与其一样,现在针对我提出的这个问题还是有问题的,项目demo已附件,同样插件链接地址和报错地址附上 插件地址(https://ext.dcloud.net.cn/plugin?id=860) 之前类似报错地址(https://enxt.dcloud.net.cn/plugin?id=860) 急急急!!!

附件:

ios滑动出错.zip


更多关于uni-app list滑动组件下 安卓正常高度上下切换 ios系统样式高度混乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这个是插件问题了 联系下插件作者吧

更多关于uni-app list滑动组件下 安卓正常高度上下切换 ios系统样式高度混乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


插件作者让我来报bug,他就之前报过bug。 ios端现在能有解决方案吗,苹果获取到高度上画或者下滑就是会混乱但是把下面的tabber隐藏就可以每次正常全屏展示,可有兼容方案 烦请告知。。。

这是一个典型的iOS平台下nvue列表组件高度计算异常问题,主要与iOS的渲染机制和flex布局计算有关。

原因分析:

  1. iOS对flex布局的高度计算与Android存在差异,特别是在动态计算高度时容易出现累积误差
  2. nvue在iOS平台使用原生渲染,对高度变化的响应机制不同
  3. 列表项高度动态变化时,iOS可能未正确触发重新布局

解决方案:

  1. 固定高度策略
.list-item {
  height: 固定高度px; /* 避免动态计算 */
}
  1. 使用min-height替代height
.list-item {
  min-height: 预期最小高度px;
}
  1. 强制重新渲染 在列表数据更新后调用:
this.$forceUpdate();
  1. iOS特定样式修复
/* 针对iOS的样式修复 */
.list-item {
  flex-shrink: 0; /* 防止收缩 */
  box-sizing: border-box;
}
  1. 列表容器优化
.scroll-view {
  flex: 1;
  overflow: hidden;
}
回到顶部