uni-app中plus.nativeUI.showWaiting的loading属性添加icon不显示

uni-app中plus.nativeUI.showWaiting的loading属性添加icon不显示

在uniapp中plus.nativeUI.showWaiting中在loading属性中添加icon不显示，但是把loading属性中icon去掉之后就显示默认的icon了。

let WaitingLoadingStyles = {
  icon: '../static/two/example/explame.png',
  height: '100px',
  width: '100px',
  interval: 300,
  type: 'snow'
}
plus.nativeUI.showWaiting("Loading...", {
  background: 'rgba(0,0,0,0)',
  loading: WaitingLoadingStyles
})

有没有大佬帮忙看一下，谢谢。


更多关于uni-app中plus.nativeUI.showWaiting的loading属性添加icon不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中plus.nativeUI.showWaiting的loading属性添加icon不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，plus.nativeUI.showWaiting 方法用于显示一个等待框（Loading 框），通常用于提示用户某个操作正在进行中。虽然 plus.nativeUI.showWaiting 方法的官方文档并没有直接提到 loading 属性，但基于你的问题，我猜测你可能想自定义这个等待框，比如添加一个图标。

plus.nativeUI.showWaiting 本身不支持直接添加图标的功能，但是你可以通过一些变通的方法来实现类似的效果。一个常见的方法是使用 plus.nativeUI.createWaiting 来创建一个自定义的等待框，然后设置其标题、内容等属性，虽然这仍然不能直接添加图标，但你可以通过修改内容来间接实现。

不过，如果你确实需要在等待框中显示图标，可以考虑使用 HTML5+ 的 plus.webview.create 方法创建一个覆盖在当前页面上的新 webview，然后在这个 webview 中自定义你的等待框，包括图标。以下是一个基本的实现思路：

// 创建一个新的 webview 覆盖在当前页面上
var waitingWebview = plus.webview.create('waiting.html', '_waiting', {
    top: '50%',
    left: '50%',
    width: '200px',
    height: '200px',
    system: true
});
waitingWebview.setStyle({
    top: (plus.screen.height - 200) / 2 + 'px',
    left: (plus.screen.width - 200) / 2 + 'px'
});
plus.webview.show(waitingWebview);

// waiting.html 的内容
// <html>
// <head>
//     <style>
//         .waiting-container {
//             position: absolute;
//             top: 50%;
//             left: 50%;
//             transform: translate(-50%, -50%);
//             text-align: center;
//         }
//         .waiting-icon {
//             width: 50px;
//             height: 50px;
//         }
//     </style>
// </head>
// <body>
//     <div class="waiting-container">
//         <img src="path/to/your/icon.png" class="waiting-icon" alt="Loading">
//         <p>Loading...</p>
//     </div>
// </body>
// </html>

// 在适当的时候隐藏等待框
// plus.webview.close(waitingWebview);

请注意，上面的代码示例中，waiting.html 需要你自行创建，并放置在你的项目中。同时，path/to/your/icon.png 需要替换为你实际的图标路径。

这种方法虽然相对复杂，但提供了最大的灵活性，允许你完全自定义等待框的外观和行为。

回到顶部