uni-app plus.nativeUI.toast样式设置问题

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app plus.nativeUI.toast样式设置问题

示例代码：

plus.nativeUI.toast(title, {  
    verticalAlign: "top",  
    type:"text",  
    icon:"/static/all/logo.png",  
    iconWidth:"24px",  
    iconHeight:"24px",  
    style: 'inline',  
})

操作步骤：

  • 使用以上代码

预期结果：

  • 显示位置和圆角不发生变化，设置底色为白色之后字体颜色不发生变化

实际结果：

  • 样式混乱

bug描述：

  • 使用这段代码后，背景色从原来的白底黑字自动变成了黑底白字，使用background将底色变成白底之后，字体颜色又会变成白色导致字体显示不出来，并且相对于原来纯文字显示，加上了icon的显示位置和圆角都有变化

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Windows  | win10  | HBuilderX     |
|          | 4.29   |              |
| Android  | Android 12 |          |
| 手机厂商 | 手机机型 | 页面类型 |
| vivo     | IQOO 8   | vue       |
|          |          | vue3      |
| 打包方式 |     
| 云端     |

Harmonyos Next教程
2 回复

这调用的是系统UI。自定义需求推荐使用前端UI组件去实现


在uni-app中，plus.nativeUI.toast 方法用于显示本地消息提示框。虽然 plus.nativeUI.toast 提供了基本的显示功能，但其样式设置相对有限，仅支持一些基础的配置选项，如位置、持续时间等。不过，通过一些技巧，我们仍然可以实现一定程度的样式自定义。

以下是一个基本的 plus.nativeUI.toast 使用示例，以及一些常见的样式设置代码案例：

// 基本的toast显示
plus.nativeUI.toast('Hello, uni-app!', {
    duration: 2000, // 持续时间为2秒
    vertical: 'center', // 垂直位置居中
    horizontal: 'center' // 水平位置居中
});

// 设置toast的背景颜色和文字颜色（注意：原生toast通常不支持直接设置这些样式，这里提供变通方法）
// 由于原生toast不支持直接修改背景色和文字色，我们可以通过创建自定义的模态框来模拟toast效果
function customToast(message, duration) {
    let modal = plus.nativeUI.createModal('', message, ['OK'], function(e) {
        modal.close();
    });

    // 设置样式（这里只是示例，具体样式需根据需求调整）
    let style = `
        .toast-wrapper {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 15px;
            background-color: #333; /* 背景色 */
            color: #fff; /* 文字色 */
            border-radius: 5px;
            text-align: center;
            z-index: 9999;
        }
    `;
    let div = document.createElement('div');
    div.className = 'toast-wrapper';
    div.innerHTML = message;
    document.head.insertAdjacentHTML('beforeend', `<style>${style}</style>`);
    document.body.appendChild(div);

    setTimeout(() => {
        document.body.removeChild(div);
    }, duration);
}

// 使用自定义toast
customToast('这是一个自定义样式的Toast', 2000);

在上面的代码中，我们首先展示了如何使用 plus.nativeUI.toast 的基本功能。然后，为了实现对toast样式的更多控制，我们定义了一个 customToast 函数，该函数通过创建一个自定义的模态框来模拟toast效果，并应用CSS样式来实现背景颜色和文字颜色的自定义。

需要注意的是，虽然这种方法可以实现更多的样式控制，但它并不是真正的原生toast。因此，在性能、动画效果等方面可能与原生toast存在差异。在选择使用哪种方法时，需要根据具体的应用场景和需求进行权衡。

回到顶部