apicloud apicloud

注册
查看: 1977|回复: 7

[模块教程] arcProgress 进度条模块效果展示

实习司机

UID:253705

主题:
53
帖子:
175
云币:
476

[模块教程] arcProgress 进度条模块效果展示

1977 7 | 发表于 2018-8-11 13:06:41 |阅读模式 | |
本帖最后由 uoaccw 于 2018-12-28 20:37 编辑

arcProgress是一个弧形进度条,包括环形、扇形、类月牙形三种样式,开发者可以自定义进度色和背景色。此模块动画流畅,原生实现效果炫酷,有效的解决了网页画圆会有锯齿的问题

文档地址:https://docs.apicloud.com/Client-API/UI-Layout/arcProgress


arcProgress模块效果展示:颜色和大小是可以自定义的。可在APPLoader中查看效果。


  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6.     <title>title</title>
  7.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  8.     <style>
  9.         body {
  10.             padding: 10px;
  11.         }

  12.         button {
  13.             margin: 10px;
  14.         }
  15.     </style>
  16. </head>

  17. <body>
  18.       <button tapmode type="button" onclick="arcProgress_open('annular',130)" name="button">环形</button>
  19.      <button tapmode type="button" onclick="arcProgress_open('sector',280)" name="button">扇形</button>
  20.      <button tapmode type="button" onclick="arcProgress_open('crescent',410)" name="button">月牙形</button>
  21. </body>
  22. <script type="text/javascript" src="../script/api.js"></script>
  23. <script type="text/javascript">
  24.     var arcProgress;
  25.     apiready = function() {
  26.         arcProgress = api.require('arcProgress');
  27.     };
  28.     // annular //环形
  29.     // sector //扇形
  30.     // crescent //月牙形
  31.     function arcProgress_open(type, y) {
  32.         arcProgress.open({
  33.             type: type,
  34.             centerX: api.frameWidth / 2,
  35.             centerY: y,
  36.             radius: api.frameWidth / 7,
  37.             bgColor: 'rgba(0,0,0,0)',
  38.             pgColor: '#0066CC',
  39.             fixedOn: api.frameName,
  40.             fixed: true
  41.         }, function(ret, err) {
  42.             if (ret) {
  43.                 id = ret.id;
  44.             }

  45.             int = self.setInterval("setV()", 10)
  46.             i = 0;
  47.         });
  48.     }

  49.     function setV() {
  50.         i = i + 0.1;
  51.         arcProgress.setValue({
  52.             id: id,
  53.             value: i
  54.         });

  55.         if (i == 100) {
  56.             window.clearInterval(int)
  57.         }
  58.     }
  59. </script>

  60. </html>

复制代码



本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

主题:
37
帖子:
236
云币:
286

捣蛋鬼

发表于 2018-8-11 16:39:05 |
赞一个

版主

UID:453379

主题:
18
帖子:
5850
云币:
48987

端午节圣诞节捣蛋鬼APICloud五岁啦

发表于 2018-8-11 16:39:46 |
顶一个

主题:
9
帖子:
48
云币:
430
发表于 2018-8-21 17:40:12 |
非常棒 个人觉得比官网给的案例 更好 为啥不替换这种写法呢

老司机

UID:673413

主题:
175
帖子:
12677
云币:
5649

圣诞节

发表于 2018-8-21 20:22:08 |
顶一下

驾校小白

UID:658720

主题:
5
帖子:
38
云币:
66
发表于 2018-8-23 14:19:08 |
支持一下

主题:
6
帖子:
17
云币:
49
发表于 2018-12-23 12:05:36 |
不错。看看

主题:
0
帖子:
1
云币:
1
发表于 2019-1-22 13:56:15 |
在加载时候,没有参数可以阻止页面事件吗,
您需要登录后才可以回帖 登录 | 立即注册

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