uni-app nvue list标签在ios15下上下滚动出现白屏

uni-app nvue list标签在ios15下上下滚动出现白屏

示例代码:

<template>  
    <div>  
        <list>  
            <cell v-for="(item,index) in 50" :key="index">  
                <view class="dome">  
                    <text class="dome-text">{{index}}</text>  
                </view>  
            </cell>  
        </list>  
    </div>  
</template>  
<script>  
    export default {  

    }  
</script>  

<style>  
.dome{  
    height: 300rpx;  
    background-color: #007AFF;  
    width: 750rpx;  
    flex-direction: row;  
    align-items: center;  
    justify-content: center;  
    margin-bottom: 20rpx;  
}  
.dome-text{  
    color: #FFFFFF;  
    font-size: 50rpx;  
}  
</style>  

操作步骤:

  • 在苹果ios15系统中上下滚动数据正常显示

预期结果:

  • 在苹果ios15系统中上下滚动正常显示

实际结果:

  • 在苹果ios15系统中上下滚动出现白屏

bug描述:

nvue页面中使用list-cell方法 在ios15下 上下滚动会出现空白dome中能直接体现

信息类别 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.2.9
手机系统 iOS
手机系统版本号 iOS 15
手机厂商 苹果
手机机型 苹果11pro
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例图片

dome.zip


更多关于uni-app nvue list标签在ios15下上下滚动出现白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

不要沉啊 特别严重的问题 太影响使用了 望重视!!!

更多关于uni-app nvue list标签在ios15下上下滚动出现白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是否为相同问题,https://ask.dcloud.net.cn/question/132309 请升级到HBuilderX 3.2.11 alpha 试试;

是这个问题 感谢!

这是一个已知的 iOS 15 系统下 nvue list 组件的渲染问题。主要原因是 iOS 15 对 WKWebView 的渲染机制进行了调整,导致 list 组件在快速滚动时可能出现白屏。

解决方案:

  1. 升级 HBuilderX 到最新版本(当前最新为 3.6+),新版已针对 iOS 15 的渲染优化进行了适配。

  2. 在 list 组件上添加 bounce 属性

<list bounce="false">

禁用弹性效果可以避免部分渲染异常。

  1. 调整 cell 的渲染方式
  • 确保 cell 高度固定或可计算
  • 避免在 cell 中使用过于复杂的嵌套布局
  • 尝试为 cell 添加明确的背景色
  1. 使用 recycle-list 替代方案(如需高性能列表):
<recycle-list>
  <cell-slot>
    <!-- 内容 -->
  </cell-slot>
</recycle-list>
  1. 临时规避方案
<list style="background-color: #FFFFFF;">
回到顶部