提示信息弹出（toast）

最新推荐文章于 2024-07-02 14:12:03 发布

约嫦娥烤兔子

最新推荐文章于 2024-07-02 14:12:03 发布

阅读量2.4w

点赞数 4

分类专栏： JS 文章标签： toast 弹出框移动端

本文链接：https://blog.csdn.net/qq_41362025/article/details/81352828

版权

JS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

使用普通的alret();可以实现弹出框，但是不够美观。移动端框架AUI提供了一种弹出样式，

AUI官网地址：http://www.auicss.com/

实现过程如下：

第一步：在<head>里引入AUI的css和toast.js文件。

<link rel="stylesheet" type="text/css" href="aui-20170109-v2.1/css/aui.css" />
<link rel="stylesheet" type="text/css" href="aui-20170109-v2.1/css/aui-toast.css" />

第二步：设置触发函数。（例如给一个按钮设置点击函数）。

<div class="aui-btn aui-btn-info aui-btn-block" onclick="return errorTest()">注册</div>

第三步：编写函数内容：

function errorTest() {
   var toast = new auiToast();
   toast.success({
      title:"提交成功",
      duration:2000
   });//成功类

   toast.fail({
      title:"提交失败",
      duration:2000
   });//失败类

   toast.custom({
      title:"成功给了一个赞",
      html:'<i class="aui-iconfont aui-icon-laud"></i>',
      duration:2000
   });自定义图标

   toast.loading({ 
      title:"加载中",
      duration:2000
   },function(ret){ 
        console.log(ret);
        setTimeout(function(){
           toast.hide();
        }, 3000)
   });加载中：
}

本人为JS实习生一枚，不断学习，不断进步，欢迎各位前辈批评指教。