progressbar（滚动条）

优质

小牛编辑

133浏览

2023-12-01

有准确值的进度条

进度条控件DOM结构：

<div id="demo1" class="mui-progressbar">
  <span></span>
</div>

初始化:

  mui(container).progressbar({progress:20}).show();

例如:

  mui("#demo1").progressbar({progress:20}).show();

progressbar初始化逻辑：

检查当前容器(container控件)自身是否包含.mui-progressbar类：

当前容器包含.mui-progressbar类，则以当前容器为目标控件，直接显示进度；
否则，检查当前容器的直接孩子节点是否包含.mui-progressbar类，若存在，则以遍历到的第一个含有.mui-progressbar类的孩子节点为目标控件，显示进度；
若当前容器的直接孩子节点，均不含.mui-progressbar类,则自动创建进度条控件；

更改显示进度条:

  mui(container).progressbar().setProgress(50);

关闭进度条:

  mui(container).progressbar().hide();

备注：关闭进度条一般用于动态创建（DOM中预先未定义）的进度条，调用hide方法后，会直接删掉对应的DOM节点；若已提前创建好DOM节点的进度条，调用hide方法无效；

无限循环进度条:

若无法准确提供当前进度，可以提供无限循环进度条（无限循环进度条类似于waiting等待框,参考[HTML5+规范]

无限循环进度条和准确值的进度条的用法基本相同，有如下差异：

进度条控件DOM结构（多了.mui-progressbar-infinite）：

<div id="demo1" class="mui-progressbar mui-progressbar-infinite">
  <span></span>
</div>

初始化

  mui("#demo1").progressbar().show();

注意：无限循环进度条不显示具体进度，因此初始化时，不能传入progress参数；mui框架也是根据progressbar构造方法中是否包含progress参数来区分当前进度条为有准确值的进度条还是无限循环进度条；

同样因为不显示具体进度的原因，无限循环进度条调用setProgress()方法无效。

关闭进度条

  mui("#demo1").progressbar().hide();

页面顶部进度条类似浏览器进度条，固定显示在页面顶部（标题导航控件下方）；因此，若当前页面使用父子双webview模式，子页面没有标题导航组件，则需通过自定义css的方式，重定义顶部进度条的位置，示例代码如下：

body>.mui-progressbar{
  top:0
}

使用页面顶部进度条时，无需编写DOM结构，使用如下代码即可自动创建（顶部无限循环进度条同理）：

mui('body').progressbar({
  progress: 20
}).show();

代码块激活字符 mprogressbar