帮我写一个uniapp的好看一点提示弹出框代码库
时间: 2023-08-11 17:05:34 浏览: 97
一个很好的弹出框
当然可以!以下是一个简单但好看的提示弹出框代码库示例:
```javascript
// toast.js 文件
export function showToast(title, icon = 'none', duration = 2000) {
uni.showToast({
title: title,
icon: icon,
duration: duration,
mask: true,
image: '/static/toast.png' // 替换成你自己的提示图标路径
});
}
export function showLoading(title = '加载中') {
uni.showLoading({
title: title,
mask: true,
image: '/static/loading.png' // 替换成你自己的加载图标路径
});
}
export function hideToast() {
uni.hideToast();
}
export function hideLoading() {
uni.hideLoading();
}
```
在这个代码库中,我们定义了四个函数:`showToast`、`showLoading`、`hideToast`、`hideLoading`。它们分别用于显示提示弹出框、显示加载中弹出框,以及隐藏提示弹出框和加载中弹出框。
您可以在需要使用提示弹出框的页面中导入这个代码库,并调用相应的函数来显示或隐藏弹出框。例如:
```javascript
// 在需要使用提示弹出框的页面中
import { showToast, showLoading, hideToast, hideLoading } from 'toast.js';
// 显示提示弹出框
showToast('操作成功', 'success');
// 显示加载中弹出框
showLoading('加载中...');
// 隐藏提示弹出框
hideToast();
// 隐藏加载中弹出框
hideLoading();
```
您可以根据自己的需求,修改弹出框的样式、图标和持续时间。只需要替换 `image` 属性的路径为您自己的图标路径即可。
希望这个代码库能满足您的需求!如果还有其他问题,请随时提问。
阅读全文