前端开发之弹出框系列教程五:Loading提示框

 1、Loading样式一。
var loading=$k.loading();
//3秒后关闭加loading提示框
window.setTimeout(function(){
    loading.close();
},3000);
查看效果
 2、Loading样式二。
var loading=$k.loading({loadingCls:'kui-window-loading-2'});
//3秒后关闭加loading提示框
window.setTimeout(function(){
    loading.close();
},3000);
查看效果
 3、Loading样式三。
var loading=$k.loading({loadingCls:'kui-window-loading-3'});
//3秒后关闭加loading提示框
window.setTimeout(function(){
    loading.close();
},3000);
查看效果
 4、Loading样式四:文字提示
var loading=$k.loading({content:'数据加载中...'});
//3秒后关闭加loading提示框
window.setTimeout(function(){
    loading.close();
},3000);
查看效果
 5、自定义Loading提示内容
var content='<div class="kui-window-loading-1" style="width:100%;background-position:center;"></div><div class="kui-window-loading-text">数据加载中...</div>';
var loading=$k.loading({content:content});
//3秒后关闭加loading提示框
window.setTimeout(function(){
    loading.close();
},3000);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当然可以!以下是一个简单但好看的提示弹出代码库示例: ```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` 属性的路径为您自己的图标路径即可。 希望这个代码库能满足您的需求!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值