144 lines
3.1 KiB
JavaScript
144 lines
3.1 KiB
JavaScript
// packageH/deposit_group/component/progress/progress.js
|
|
Component({
|
|
properties: {
|
|
//设置当前完成步数
|
|
steps: {
|
|
type: Number,
|
|
value: 0
|
|
},
|
|
stepsList: {
|
|
type: Array,
|
|
}
|
|
},
|
|
|
|
data: {
|
|
percent: 50, // 进度条基础百分之五十
|
|
number: -1,
|
|
progressList: [],
|
|
bubbleList: []
|
|
},
|
|
lifetimes: {
|
|
attached () {
|
|
this.randomColor();
|
|
this.timerAni();
|
|
let background = wx.getStorageSync('backgroundRGB');
|
|
if (!background) {
|
|
background = [254, 196, 0];
|
|
}
|
|
this.setData({
|
|
backgroundRGB: background
|
|
});
|
|
}
|
|
},
|
|
pageLifetimes: {
|
|
show () {
|
|
this.timerAni();
|
|
},
|
|
hide () {
|
|
clearInterval(this.timer);
|
|
}
|
|
},
|
|
observers: {
|
|
'stepsList': function (newVal) {
|
|
this.setProgress();
|
|
}
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
setProgress () {
|
|
let arr = this.data.stepsList;
|
|
let reStepsList = [];
|
|
let reSteps = 0;
|
|
if (arr.length <= 2) {
|
|
this.setData({
|
|
percent: 100
|
|
});
|
|
} else {
|
|
this.setData({
|
|
percent: 50
|
|
});
|
|
}
|
|
if (arr.length <= 3) {
|
|
reStepsList = arr;
|
|
reSteps = this.data.steps;
|
|
} else if ((this.data.steps < arr.length - 1) && this.data.steps == 0) {
|
|
reStepsList.push(arr[0], arr[0 + 1], arr[arr.length - 1]);
|
|
} else if ((this.data.steps < arr.length - 1) && this.data.steps > 0){
|
|
reStepsList.push(arr[0], arr[this.data.steps], arr[arr.length - 1]);
|
|
reSteps = 1;
|
|
} else {
|
|
reStepsList.push(arr[0], arr[Math.round(arr.length / 2)], arr[arr.length - 1]);
|
|
reSteps = 2;
|
|
}
|
|
this.setData({
|
|
steps: reSteps,
|
|
progressList: reStepsList
|
|
});
|
|
},
|
|
|
|
// 冒泡动画
|
|
randomNum(minNum, maxNum) {
|
|
switch (arguments.length) {
|
|
case 1:
|
|
return parseInt(Math.random() * minNum + 1, 10);
|
|
case 2:
|
|
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
|
|
default:
|
|
return 0;
|
|
}
|
|
},
|
|
randomColor () {
|
|
var color="#";
|
|
for(var i=0;i<6;i++){
|
|
color += (Math.random()*16 | 0).toString(16);
|
|
}
|
|
return {color,};
|
|
},
|
|
|
|
|
|
timerAni () {
|
|
for(var i = 0; i < 8; i++){
|
|
let color = this.randomColor();
|
|
this.setData({
|
|
[`bubbleList[${i}]`]: color
|
|
});
|
|
this.data.bubbleList.push(color);
|
|
}
|
|
this.timer = setInterval(() => {
|
|
this.translate();
|
|
}, 1500);
|
|
},
|
|
|
|
translate() {
|
|
let randomNumX = this.randomNum(-20, 20);
|
|
this.setData({
|
|
number: this.data.number + 1
|
|
}, () => {
|
|
if (this.data.number > 7) {
|
|
this.setData({
|
|
number: -1
|
|
});
|
|
}
|
|
});
|
|
// .active 是选择器
|
|
this.animate('.active', [{
|
|
opacity: 1,
|
|
translateY: 0,
|
|
},
|
|
{
|
|
opacity: 1,
|
|
translate:[randomNumX, this.randomNum(-5, -20)]
|
|
},
|
|
{
|
|
// opacity: 0,
|
|
translate: [randomNumX, -200]
|
|
},
|
|
], 1500, function () {
|
|
//动画完成后的回调函数
|
|
}.bind(this));
|
|
},
|
|
}
|
|
});
|