weex 进度条如何实现?
本文介绍了weex 进度条如何实现?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
这样的进度条用WEEX如何实现呢? 求代码。
解决方案
这个用原生js和CSS3动画就可以实现了,跟你用啥框架没关系。。
简单说下思路:
.progress-bar {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#249cf2), to(#249cf2));
-webkit-animation: load 3s ease-out 1 forwards;
}
<style id="dynamic"></style>
<div id="progress-bar" class="progress-bar"></div>
这段样式截取最后一帧动画,就是进度条伸展到最后停住,forwards。
js这边
<script type="text/javascript">
function setStyle(obj, css) {
for (var i in css) {
obj.style[i] = css[i];
}
}
function percent(qty,totalQty)
{
//......
}
var width = percent(qty, totalQty); //percent具体计算百分比的逻辑,按照你自己的业务情况实现。
var dynamic = document.getElementById("dynamic");
dynamic.innerHTML = '@keyframes load {0% {width: 0%;}100% {width: ' + width + ';}}';
window.onload = function () {
var bar = document.getElementById("progress-bar");
setStyle(bar, {width: width});
}
</script>
还有就是移动端用就所谓了,web端的话别忘记给IE下animation做兼容
这篇关于weex 进度条如何实现?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文