Cocos Creator之微信小游戏的进度条（填充模式）

方法1

1、在需要的地方添加UI组件进度条（ProgressBar）：
图中将进度条背景和进度条分开，便于观察理解。
2、将进度条显示图的渲染模式改为Filled（填充模式），填充起始位置（Fill Start）改为0，填充总量（Fill Range）改为1（截图中为0.5，即进度条加载到50%）：3、代码控制加载进度条的填充总量：

//获取到进度条图片
let btn_leftPosition = cc.find("Canvas/ProgressBar_test/btn_leftPosition");
//将进度条图的填充总量置为0
this.btn_fillRange = btn_leftPosition._components[0].fillRange = 0;
//将进度条图的填充起始位置置为0（可在编辑器直接置为0）        
btn_leftPosition._components[0].fillStart = 0;
let self = this;
this.schedule(function () {            
    //随机数字
    let math_random = Math.ceil(Math.random() * 1 + 1.5); 
    //进度条填充总量增加            
    self.btn_fillRange = btn_leftPosition._components[0].fillRange += math_random / 100;
    //判断进度条是否加载完全 
    if (self.btn_fillRange >= 1.0) { 
        //进行下一步操作
    } 
console.log("self.btn_fillRange = ", self.btn_fillRange); 
}, 0.1);

当然也可以自定义各种加载的速度。

方法2

1、设置进度条的Mode属性为Filled（填充模式），进度属性Progress可以自主设定，也可以根据预加载设定，进度条的显示条设置参考方法1里面的第2条；

2、代码如下：

let jindutiao = this.schedule(function () {
    //随机数字  
    let math_random = Math.ceil(Math.random() * 1 + 1.5); 
    //进度条填充总量增加  
    this.ProgressBar.progress += math_random / 100;  
    //判断进度条是否加载完全
    if (this.btn_fillRange >= 1.0) {
        //进行下一步操作 
        console.log("停止", jindutiao);
    }
}, 0.1);

运行效果如下：

如有问题，欢迎指正，共同学习，谢谢。