arcProgress 进度条模块效果展示

uoaccw

本帖最后由 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>

复制代码

かれたそ時

赞一个

辉哥_0808

顶一个

木子木木

非常棒个人觉得比官网给的案例更好为啥不替换这种写法呢

得呤

顶一下

sucuiping

支持一下

daocaoren1024 · 回复于2018-12-23 12:05:36

不错。看看

安鱼oooo

在加载时候，没有参数可以阻止页面事件吗，