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

图中将进度条背景和进度条分开，便于观察理解。

将进度条显示图的渲染模式改为Filled（填充模式），填充起始位置（Fill Start）改为0，填充总量（Fill Range）改为1（截图中为0.5，即进度条加载到50%）：

//获取到进度条图片

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)

```

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

设置进度条的Mode属性为Filled（填充模式），进度属性Progress可以自主设定，也可以根据预加载设定，进度条的显示条设置参考方法1里面的第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)

运行效果如下：

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

cocos在游戏界面一段时间后显示图片的方法非常简单，首先在cocos内对软件进行设置，然后再在游戏内设置，然后导入图片，就能显示图片了。

步骤就是首先创建背景，然后创建节点渲染节点，点击sprite精灵，然后创建进度条，再导入图片，就可以显示了。

---