apicloud apicloud

注册
查看: 2524|回复: 5

[模块教程] UIActionProgress(下载进度条) demo示例

职业车手

UID:360126

主题:
43
帖子:
2169
云币:
4306

足球狗APICloud粉丝社会摇超人SB侠APICloud大会专属勋章狗年旺旺旺儿童节快乐

[模块教程] UIActionProgress(下载进度条) demo示例

2524 5 | 发表于 2017-11-28 11:57:08 |阅读模式 | |
使用UIActionProgress模块来展示下载文件的进度。

代码如下
<!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">
                <title>title</title>
                <link rel="stylesheet" type="text/css" href="../css/api.css"/>
                <style>
                        header {
                                background: #03A9F4;
                        }
                        header .title {
                                font-size: 18px;
                                color: #fff;
                                text-align: center;
                                padding: 10px 0;
                        }
                        header .left {
                                position: absolute;
                                left: 10px;
                                bottom: 12px;
                                font-size: 14px;
                                color: #fff;
                        }
                        button {
                                margin: 10px 0 0 10px;
                                padding: 5px;
                                background: #ccc;
                                font-size: 16px;
                        }
                </style>
        </head>
        <body>
                <header id="header">
                        <div tapmode class="left">
                                返回
                        </div>
                        <div class="title">
                                UIActionProgress
                        </div>
                </header>
                <button tapmode>
                        模拟下载
                </button>
        </body>
        <script type="text/javascript" src="../script/api.js"></script>
        <script type="text/javascript">
                var UIActionProgress, value = 0;
                apiready = function() {
                        //适配沉浸式状态栏
                        var header = $api.byId('header');
                        $api.fixStatusBar(header);
                        //引入UIActionProgress模块
                        UIActionProgress = api.require('UIActionProgress');
                };
                //打开模块
                function openUIActionProgress() {
                        UIActionProgress.open({
                                maskBg : 'rgba(0,0,0,0.4)',
                                styles : {
                                        h : 108,
                                        bg : '#fff',
                                        title : {
                                                size : 14,
                                                color : '#000',
                                                marginT : 10
                                        },
                                        msg : {
                                                size : 12,
                                                color : '#666',
                                                marginT : 5
                                        },
                                        lable : {
                                                size : 12,
                                                color : '#696969',
                                                marginB : 5
                                        },
                                        progressBar : {
                                                size : 4,
                                                normal : '#ccc',
                                                active : '#03a9f4',
                                                marginB : 15,
                                                margin : 5
                                        }
                                },
                                data : {
                                        title : '正在连接服务器...',
                                        msg : '文件名',
                                        value : 0
                                }
                        }, function(ret) {
                                if (ret.eventType == 'show') {
                                        //这里应该是调用api.download去下载一个文件,然后根据api.download中的回调下载进度去修改模块参数;
                                        //由于是示例代码,使用setInterval来模拟下载进度变化。
                                        //循环调用
                                        var timer = setInterval(function() {
                                                if (value > 100) {
                                                        //停止循环
                                                        clearInterval(timer);
                                                        //重置value
                                                        value = 0;
                                                }
                                                //修改参数
                                                setData(value);
                                                //每次给value+5
                                                value += 5;
                                        }, 500);
                                }
                        });
                };
                //修改参数
                function setData(value) {
                        if (value == 100) {
                                UIActionProgress.setData({
                                        data : {
                                                title : '下载完成',
                                                msg : '文件名',
                                                value : value
                                        }
                                });
                                setTimeout(function() {
                                        //关闭进度条模块
                                        closeUIActionProgress();
                                }, 300);
                        } else {
                                //修改进度条参数
                                UIActionProgress.setData({
                                        data : {
                                                title : '下载中...',
                                                msg : '文件名',
                                                value : value
                                        }
                                });
                        }
                };
                //关闭模块
                function closeUIActionProgress() {
                        UIActionProgress.close();
                };
        </script>
</html>


1

查看全部评分

主题:
1087
帖子:
4881
云币:
2147217741

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2017-11-28 12:00:02 |
感谢分享

驾校小白

UID:575870

主题:
4
帖子:
33
云币:
29
发表于 2018-2-7 13:52:49 |


这什么鬼?不是官方的模块吗?

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

职业车手

UID:360126

主题:
43
帖子:
2169
云币:
4306

足球狗APICloud粉丝社会摇超人SB侠APICloud大会专属勋章狗年旺旺旺儿童节快乐

 楼主| 发表于 2018-2-7 14:12:19 |
分享网 发表于 2018-2-7 13:52
这什么鬼?不是官方的模块吗?

并不是所有的官方模块都可以直接在apploader里使用的。建议添加模块到项目里面,编译自定义loader测试。

驾校小白

UID:575870

主题:
4
帖子:
33
云币:
29
发表于 2018-2-7 14:24:58 |
周岚 发表于 2018-2-7 14:12
并不是所有的官方模块都可以直接在apploader里使用的。建议添加模块到项目里面,编译自定义loader测试。 ...

好吧。我试试

主题:
1
帖子:
38
云币:
37

APICloud粉丝装逼侠

发表于 2018-3-9 08:47:57 |
小手一抖,金币拿走
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表