APP开发平台 > Blog > 知识教程 | UILoading 模块demo源码示例

知识教程 | UILoading 模块demo源码示例

    UILoading 模块封装了两种款式的加载提示框,每一种款式都提供一个接口来调用。开发者可参考各个接口的样式来自定义加载提示框上的图片信息。

index.html

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <style type="text/css">

        html{ background-color: white; }

        header{ border-bottom: 1px solid #ccc; padding: 25px 0; }

        span {

            padding: 10px 15px;

            margin: 10px;

            display: inline-block;

            background-color: #e8e8e8;

        }

        .hover{ opacity: .4; }

    </style>

</head>

<body>

    <header>

        <h1>UILoading</h1>

        <mark>

            使用前请详细阅读 文档 使用规则

        </mark>

    </header>

    <span tapmode="hover" onclick="fnFlower()">flower</span>

    <span tapmode="hover" onclick="fnKeyFrame()">keyFrame</span>

    <span tapmode="hover" onclick="fnCloseFlower()">closeFlower</span>

    <span tapmode="hover" onclick="fnCloseKeyFrame()">closeKeyFrame</span>

</body>

<script type="text/javascript">

    var UILoading;

    apiready = function() {

        UILoading = api.require('UILoading');

    };

    function fnFlower(){

        UILoading.flower({

            center: {                            

                x: 160,            

                y: 300         

            },

            size: 30,

            fixed: true

        }, function(ret){   

            alert(JSON.stringify(ret));

        });

    }

    function fnKeyFrame(){

        UILoading.keyFrame({

            rect: {

                w: 80,                              

                h: 100      

            },

            styles: {

                bg: 'rgba(0,0,0,0.5)', 

                corner: 5, 

                interval: 50,

                frame:{ 

                    w: 80, 

                    h: 80

                }

            }

        }, function(ret){   

            alert(JSON.stringify(ret));

        });

    }

    function fnCloseFlower(){

        UILoading.closeFlower ({

            id: 0

        });

    }

    function fnCloseKeyFrame(){

        UILoading.closeKeyFrame();

    }

</script>

</html>

复制代码


config.xml

<?xml version="1.0" encoding="UTF-8"?>

<widget id="A0000000000001"  version="0.0.1">

    <name>UILoading</name>

    <description>

        Example For APICloud.

    </description>

    <author email="developer@apicloud.com" href="http://www.apicloud.com">

        Developer

    </author>

    <content src="index.html" />

    <access origin="*" />

    <preference name="pageBounce" value="false"/>

        <preference name="appBackground" value="rgba(0,0,0,0.0)"/>

        <preference name="windowBackground" value="rgba(0,0,0,0.0)"/>

        <preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/>

        <preference name="hScrollBarEnabled" value="true"/>

        <preference name="vScrollBarEnabled" value="true"/>

        <preference name="autoLaunch" value="true"/>

        <preference name="fullScreen" value="false"/>

        <preference name="autoUpdate" value="true" />

        <preference name="smartUpdate" value="false" />

        <preference name="debug" value="true"/>

        <preference name="statusBarAppearance" value="true"/>

        <permission name="readPhoneState" />

        <permission name="camera" />

        <permission name="record" />

        <permission name="location" />

        <permission name="fileSystem" />

        <permission name="internet" />

        <permission name="bootCompleted" />

        <permission name="hardware" />

</widget>

    

更多资讯,请关注:www.apicloud.com

  提交App定制需求,了解报价和周期:https://app.apicloud.com/index?uzchannel=500


2018-05-04 来源:APICloud

An efficient app outsourcing platform that guarantees timely delivery!

Submit Requirements