uni-app ios14.1 系统版本遮罩不能阻止页面继续拖动导致多次触发相同数据请求渲染数据出现重复

uni-app ios14.1 系统版本遮罩不能阻止页面继续拖动导致多次触发相同数据请求渲染数据出现重复

示例代码：

<uni-load-more :status="status" :content-text="contentText" />

操作步骤：

引用 uni-load-more 插件，上拉刷新，加载遮罩出现时，继续拉，可以拉动。
遮罩代码 uni.showLoading({mask: true, title: '加载中...' });

预期结果：

遮罩出现的时候，不可以拉动页面。

实际结果：

ios14.1 这个，遮罩出现了，还能继续拉动页面。

bug描述：

ios 14.1 uni-load-more 上拉加载更多，每次触发数据请求都有遮罩，苹果其他系统版本和安卓遮罩出现的时候，不能继续向上拉动页面，ios14.1 这个，遮罩出现了，还能继续拉动页面，多次触发数据请求，导致数据重复。请问原因，是否能有什么解决建议？


| 信息类别       | 信息内容     |
|----------------|--------------|
| 产品分类       | uniapp/H5    |
| PC开发环境操作系统 | Windows      |
| PC开发环境操作系统版本号 | win10        |
| HBuilderX类型  | 正式         |
| HBuilderX版本号 | 3.1.4        |
| 浏览器平台     | 手机系统浏览器 |
| 项目创建方式   | HBuilderX    |

更多关于uni-app ios14.1 系统版本遮罩不能阻止页面继续拖动导致多次触发相同数据请求渲染数据出现重复的实战教程也可以访问 https://www.itying.com/category-93-b0.html

更多关于uni-app ios14.1 系统版本遮罩不能阻止页面继续拖动导致多次触发相同数据请求渲染数据出现重复的实战教程也可以访问 https://www.itying.com/category-93-b0.html

这是一个iOS 14.1系统特有的兼容性问题。在iOS 14.1中，showLoading的遮罩层对页面滚动的阻止机制存在缺陷，导致遮罩出现时页面仍可继续滚动。

解决方案：

手动控制滚动行为 在显示遮罩时禁用页面滚动：

// 显示遮罩时
uni.showLoading({mask: true, title: '加载中...'});
document.body.style.overflow = 'hidden';

// 隐藏遮罩时
uni.hideLoading();
document.body.style.overflow = '';

添加请求锁机制 防止重复请求的关键代码：

let isLoading = false;

async function loadMore() {
  if (isLoading) return;
  
  isLoading = true;
  uni.showLoading({mask: true, title: '加载中...'});
  
  try {
    await fetchData(); // 你的数据请求
  } finally {
    uni.hideLoading();
    isLoading = false;
  }
}

使用页面级滚动容器 如果使用scroll-view替代页面滚动，可以更好地控制滚动行为：

<scroll-view scroll-y [@scrolltolower](/user/scrolltolower)="loadMore">
  <!-- 内容 -->
  <uni-load-more :status="status" />
</scroll-view>

回到顶部