移动BOS控件介绍-进度条

栏目：eas cloud知识作者：金蝶来源：金蝶云社区发布：2024-09-22浏览：1

移动BOS控件介绍-进度条

进度条说明

进度条控件用于加载页面或上传其他资源时显示进度。

效果展示

控件属性

属性名	属性ID	类型	默认值	说明
ID	ID	String	progressbar1	进度条ID,可以用于jquery找元素或者设置样式,也可以使用mbos('对应ID')设置控件属性
类型	type	String	进度条	无
标题	title	String	progressbar	设置进度条的标题
刷新间隔	intervaltime	下拉框选择	不刷新	当前进度到下一进度的间隔时间，如选择5秒，那么进度都会等5秒才加载到下一进度。下拉框中可以选择不刷新、0.5秒、1秒、5秒、10秒、60秒
显示风格	progressbarstyle	下拉框选择	条形风格	进度条的形状。下拉框中可以选择条形风格、圆形风格
线宽	strokewidth	下拉框选择	标准	进度条的粗细。下拉框中可以选择标准、粗、细

常用方法

//获取当前进度条百分比
mbos("进度条ID").attr("progressWidth");
 
//进度条加1%
mbos("进度条ID").setProcess(); 

//设置进度条百分比。（这里设置后立即加载到50%）
mbos("进度条ID").setPercent(50); 

//设置刷新间隔。（这里示例间隔为2秒）
mbos("进度条ID").setIntervalTime(2000); 

//进度条自动加载到100
mbos("进度条ID").start(); 

//进度条停止加载
mbos("进度条ID").stop();

使用示例代码

1.添加进度条控件并进行设置

2.事件里添加如下代码

//页面加载后执行
mbos('page').bind('afterOnload',function(){	
    //设置刷新间隔。（这里示例间隔为2秒）	
    mbos("progressbar1").setIntervalTime(2000);	
    //进度条开始自动加载	
    mbos("progressbar1").start(); 
        
    var timer = setInterval(function () { 		
        //获取当前进度条百分比		
        var value = mbos("progressbar1").attr("progressWidth");     	
        //如果进度条达到百分之10，进度条就停止继续加载  		
        if(value==10){   			 
            mbos("progressbar1").stop();  		
        } 	
    },1000) 
 });

使用最终效果

打开页面会自动每2秒加载1%进度条，当进度条加载到10%就会停止加载