uniapp中如何使用plus.nativeui.showwaiting显示自定义图片

在uniapp中调用plus.nativeui.showwaiting时，如何显示自定义图片而不是默认的加载动画？我尝试在参数中设置image属性，但始终不生效。请问正确的实现方式是什么？是否需要特定的图片格式或路径写法？

2 回复

在uniapp中，plus.nativeui.showwaiting不支持直接显示自定义图片。你可以使用loading样式，或通过自定义遮罩层+图片实现类似效果。


在 UniApp 中，plus.nativeUI.showWaiting 默认不支持直接显示自定义图片，但可以通过结合其他方法实现类似效果。以下是具体步骤和代码示例：

实现思路

  1. 使用原生等待框：先显示一个等待框作为基础。
  2. 隐藏默认文字：将等待框的标题设为空，避免文字干扰。
  3. 叠加自定义图片：通过 plus.nativeUI 创建自定义视图，将图片覆盖在等待框上。

代码示例

// 显示带自定义图片的等待框
function showCustomWaiting() {
  // 显示等待框，隐藏默认文字
  let waiting = plus.nativeUI.showWaiting("", {
    modal: true, // 可点击背景关闭（根据需求调整）
    padlock: false
  });
  
  // 创建自定义图片视图
  let imageView = new plus.nativeObj.View("waitingImage", {
    top: "0",
    left: "0",
    height: "100%",
    width: "100%",
    position: "static"
  });
  
  // 绘制图片（替换为你的图片路径）
  imageView.drawBitmap("/static/custom-loading.png", {
    top: "40%",
    left: "35%",
    width: "30%",
    height: "20%"
  });
  
  // 将图片添加到等待框
  waiting.add(imageView);
}

// 关闭等待框
function hideWaiting() {
  plus.nativeUI.closeWaiting();
}

注意事项

  1. 图片路径：确保图片路径正确（如放在 static 目录）。
  2. 样式调整：通过 top、left 等参数调整图片位置和大小。
  3. 性能：避免使用过大图片，以免影响加载速度。
  4. 平台差异：在 Android 和 iOS 上测试效果，确保兼容性。

替代方案

如果上述方法效果不理想，可考虑：

  • 使用 CSS3 动画自定义加载组件
  • 通过 uni.showLoading 配合页面覆盖层实现

以上方法在 UniApp 中可有效显示自定义等待图片。

回到顶部