115 lines
2.5 KiB
JavaScript
115 lines
2.5 KiB
JavaScript
// packageH/deposit_group/component/progress/progress.js
|
|
Component({
|
|
properties: {
|
|
//设置当前完成步数
|
|
steps: {
|
|
type: Number,
|
|
value: 0
|
|
},
|
|
stepsList: {
|
|
type: Array,
|
|
},
|
|
tips_bg_color: {
|
|
type: String,
|
|
}
|
|
},
|
|
|
|
data: {
|
|
percent: 50, // 进度条基础百分之五十
|
|
number: -1,
|
|
progressList: [],
|
|
bubbleList: []
|
|
},
|
|
lifetimes: {
|
|
attached() {
|
|
console.log(this.data.tips_bg_color);
|
|
}
|
|
},
|
|
pageLifetimes: {
|
|
show() {},
|
|
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;
|
|
}
|
|
},
|
|
|
|
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));
|
|
},
|
|
}
|
|
}); |