|
本帖最后由 uoaccw 于 2018-12-28 20:37 编辑
arcProgress是一个弧形进度条,包括环形、扇形、类月牙形三种样式,开发者可以自定义进度色和背景色。此模块动画流畅,原生实现效果炫酷,有效的解决了网页画圆会有锯齿的问题
文档地址:https://docs.apicloud.com/Client-API/UI-Layout/arcProgress
arcProgress模块效果展示:颜色和大小是可以自定义的。可在APPLoader中查看效果。
- <!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" />
- <title>title</title>
- <link rel="stylesheet" type="text/css" href="../css/api.css" />
- <style>
- body {
- padding: 10px;
- }
- button {
- margin: 10px;
- }
- </style>
- </head>
- <body>
- <button tapmode type="button" onclick="arcProgress_open('annular',130)" name="button">环形</button>
- <button tapmode type="button" onclick="arcProgress_open('sector',280)" name="button">扇形</button>
- <button tapmode type="button" onclick="arcProgress_open('crescent',410)" name="button">月牙形</button>
- </body>
- <script type="text/javascript" src="../script/api.js"></script>
- <script type="text/javascript">
- var arcProgress;
- apiready = function() {
- arcProgress = api.require('arcProgress');
- };
- // annular //环形
- // sector //扇形
- // crescent //月牙形
- function arcProgress_open(type, y) {
- arcProgress.open({
- type: type,
- centerX: api.frameWidth / 2,
- centerY: y,
- radius: api.frameWidth / 7,
- bgColor: 'rgba(0,0,0,0)',
- pgColor: '#0066CC',
- fixedOn: api.frameName,
- fixed: true
- }, function(ret, err) {
- if (ret) {
- id = ret.id;
- }
- int = self.setInterval("setV()", 10)
- i = 0;
- });
- }
- function setV() {
- i = i + 0.1;
- arcProgress.setValue({
- id: id,
- value: i
- });
- if (i == 100) {
- window.clearInterval(int)
- }
- }
- </script>
- </html>
复制代码
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|