weui loading效果实现

最新推荐文章于 2020-12-30 08:53:22 发布

Honey_Potter

最新推荐文章于 2020-12-30 08:53:22 发布

阅读量1.6w

点赞数 3

本文链接：https://blog.csdn.net/Honey_Potter/article/details/53317309

版权

本文介绍了如何利用WeUI框架实现精美的加载动画效果，详细讲解了相关CSS和JavaScript的使用，帮助开发者快速在移动应用中添加加载提示。

摘要由CSDN通过智能技术生成

界面

<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
        <!--<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">-->
        <meta name="viewport" content="width=device-width" />
        <meta http-equiv="content-type" content="text/html;charset=gb2312">
        <title></title>
        <link rel="stylesheet" type="text/css" href="weui/dist/style/weui.min.css">

        <link rel="stylesheet" type="text/css" href="weui/dist/example/example.css">

        <script src="js/loading.js"></script>
      
        
    </head>
<body ontouchstart>
    

        <div id="center" style="display:none">
       

        </div>

       

        <script src="weui/dist/example/zepto.min.js"></script>
        <script src="weui/dist/example/example.js"></script>
        <script src="js/jweixin-1.0.0.js"></script>

</body>
</html>

loading.js

//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<div class="page__bd" id="loading"><div class="weui-loadmore"><i class="weui-loading"></i><span class="weui-loadmore__tips">正在加载</span></div></div>';
//呈现loading效果
document.write(_LoadingHtml);

//window.onload = function () {
//    var loadingMask = document.getElementById('loadingDiv');
//    loadingMask.parentNode.removeChild(loadingMask);
//};

//监听加载状态改变
document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果
function completeLoading() {
    if (document.readyState == "complete") {
        var loadingMask = document.getElementById('loading');
        loadingMask.parentNode.removeChild(loadingMask);
        document.getElementById("center").style.display = 'block';
    }
}

Honey_Potter

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫