weui Toast 弹出式提示

2018年06月09日 08:41 | 2066次浏览 作者原创 版权保护

本章节我们来介绍微信weui反馈组件中的Toast弹出式提示(需要配合js实现),Toast弹出式提示组件效果使用了jquery,所以案例依赖于jquery库大家注意。按照下面的步骤就可以做出网页效果,案例中引用的微信weui的css样式库我已经上传到百度网盘了,地址 http://pan.baidu.com/s/1cvQlLc  ,大家可以下载下来进行引用,当然你也可以引用网络地址,但是有个弊端,微信weui的样式库更新比较频繁,可能将来某一天会失效,所以最好下载到本地使用。

新建toast.html文件

一、引入css文件

在这里引入的是网络地址

<link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">

记得html设置成移动手机端浏览

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">


二、 引入jquery库依赖

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>


三、Toast弹出式提示 html代码

在<body></body>之间添加如下代码

<div class="page toast js_show">
    <div class="page__hd">
        <h1 class="page__title">Toast</h1>
        <p class="page__desc">弹出式提示</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:;" class="weui-btn weui-btn_default" id="showToast">成功提示</a>
        <a href="javascript:;" class="weui-btn weui-btn_default" id="showLoadingToast">加载中提示</a>
    </div>
    <div class="page__ft j_bottom">
        <a href="javascript:home()"><img src="./images/icon_footer_link.png"></a>
    </div>

    <!--BEGIN toast-->
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">已完成</p>
        </div>
    </div>
    <!--end toast-->

    <!-- loading toast -->
    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载中</p>
        </div>
    </div>
</div>


四、toast弹出式提示js实现代码

最好放在</body>后面

<script type="text/javascript" class="toast js_show">
    // toast
    $(function(){
        var $toast = $('#toast');
        $('#showToast').on('click', function(){
			
            if ($toast.css('display') != 'none') return;
            
            $toast.fadeIn(100);
            setTimeout(function () {
                $toast.fadeOut(100);
            }, 2000);
        });
    });

    // loading
    $(function(){
        var $loadingToast = $('#loadingToast');
        $('#showLoadingToast').on('click', function(){
            if ($loadingToast.css('display') != 'none') return;

            $loadingToast.fadeIn(100);
            setTimeout(function () {
                $loadingToast.fadeOut(100);
            }, 2000);
        });
    });
    </script>//V型知识库原创 www.vxzsk.com


五、效果

打开谷歌浏览器,设置手机网页模式浏览案例网页


六、完整html代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>www.vxzsk.comV型知识库</title>
 </head>
 <link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

 

    

 <body>

<div class="page toast js_show">
    <div class="page__hd">
        <h1 class="page__title">Toast</h1>
        <p class="page__desc">弹出式提示</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:;" class="weui-btn weui-btn_default" id="showToast">成功提示</a>
        <a href="javascript:;" class="weui-btn weui-btn_default" id="showLoadingToast">加载中提示</a>
    </div>
    <div class="page__ft j_bottom">
        <a href="javascript:home()"><img src="./images/icon_footer_link.png"></a>
    </div>

    <!--BEGIN toast-->
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">已完成</p>
        </div>
    </div>
    <!--end toast-->

    <!-- loading toast -->
    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载中</p>
        </div>
    </div>
</div>

 </body>

<script type="text/javascript" class="toast js_show">
    // toast
    $(function(){
        var $toast = $('#toast');
        $('#showToast').on('click', function(){
			
            if ($toast.css('display') != 'none') return;
            
            $toast.fadeIn(100);
            setTimeout(function () {
                $toast.fadeOut(100);
            }, 2000);
        });
    });

    // loading
    $(function(){
        var $loadingToast = $('#loadingToast');
        $('#showLoadingToast').on('click', function(){
            if ($loadingToast.css('display') != 'none') return;

            $loadingToast.fadeIn(100);
            setTimeout(function () {
                $loadingToast.fadeOut(100);
            }, 2000);
        });
    });
    </script>
</html>


如果读者想直接浏览效果,可新建个html页面,把上述的完整代码复制进去即可。


此文章本站原创,地址 https://www.vxzsk.com/1060.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程