当前位置:主页 > 微信开发 > WeUI >

微信网页开发基础组件进度条Progress

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-04
  进度条组件用处好像不是太大,一般的网站很少看到用进度条的,但是,使用进度条的网站,例如,下载一个东西、上传一个软件等都可以使用进度条增加用户体验,让用户知道目前上传或下载的进度,在微信小程序和微信网页里面使用进度条的地方也不多,不过也是一个重要的组件。

  其实,进度条不仅仅只使用在上传、下载软件时,还可以在打开网页时让网页最上面显示一个打开网页的进度,这样让用户一看就知道目前网页正在加载中,当然,做这个作用的不大。

进度条的实现原理:

  其实,就是在一条线上显示另一种颜色,例如,在灰色的线上显示绿色,这样就能出现进度条的效果了。

  例如,原来一条线是灰色的,也就是这条线的宽度为0%,加载或点击某一个按扭时(这里使用加载或点击按扭,实际应当是下载或上传等操作)这个进度条在不断的增加,直接增加到100%后,一个进度也就结束了。

一个简单的进度条结构:

    <div class="weui-progress__bar">
        <div class="weui-progress__inner-bar js_progress" style="width: 0%;"></div>
    </div>

  在类weui-progress__bar定义一条线的高度为3px;然后,在类weui-progress__inner-bar 里面定义一个高度为100%,宽度为0且颜色为“绿色”的样式,然后,使用后面定义的样式style="width:0%"来覆盖掉这个类定义里面宽度,这样从零开始值不断增加,在原线条上面就被填充绿色,这样一个进度条效果就出来了。

示例:


示例代码:

<div class="weui-progress">
    <div class="weui-progress__bar">
        <div class="weui-progress__inner-bar js_progress" style="width: 0%;"></div>
    </div>
    <a href="javascript:;" class="weui-progress__opr">
        <i class="weui-icon-cancel"></i>
    </a>
</div>
<br>
<div class="weui-progress">
    <div class="weui-progress__bar">
        <div class="weui-progress__inner-bar js_progress" style="width: 50%;"></div>
    </div>
    <a href="javascript:;" class="weui-progress__opr">
        <i class="weui-icon-cancel"></i>
    </a>
</div>
<br>
<div class="weui-progress">
    <div class="weui-progress__bar">
        <div class="weui-progress__inner-bar js_progress" style="width: 80%;"></div>
    </div>
    <a href="javascript:;" class="weui-progress__opr">
        <i class="weui-icon-cancel"></i>
    </a>
</div>
<div class="weui-btn-area">
    <a href="javascript:;" class="weui-btn weui-btn_primary" id="btnStartProgress">上传</a>
</div>

  可以在进度条后面写相应的js代码来终止进度条,实现方法也很简单,就是终止进度条的宽度width。

下面模拟改变进度条的值:
$$(function(){
    var progress = 0;
    var $$progress = $$('.weui-progress__inner-bar');

    function uploading(){
        $$progress.width(++progress % 100 + '%');
        setTimeout(uploading, 20);
    }

    setTimeout(uploading, 20);
});

预览效果如下: