weex 进度条如何实现？

Question

这样的进度条用WEEX如何实现呢？ 求代码。

Answer 1

这个用原生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做兼容

Answer 2

亲，请写css。

Answer 3

weex不支持css3的animation，请使用animation模块通过js代码来实现