小程序进度条_小程序杂技谈之横向双色进度条
横向双色进度条
先看效果图
小程序自带的进度条不能满足我们想要的效果，所以这里我们决定用view叠加的方式进行动画增长和展示
编写布局
style="margin-bottom:{{index == arrProgress.length-1 ? 46 : 0}}rpx;">
{{item.name}}
= 100}}">
定义样式
page{
background-color: #f5f5f5;
}
.v_white_border{
margin-top: 200rpx;
width: 680rpx;
margin-left: 35rpx;
border-radius: 20rpx;
background-color: #ffffff;
display: flex;
flex-direction: column;
}
.normal-progress {
position: relative;
height: 95rpx;
width: 600rpx;
margin-left: 33rpx;
}
.normal-progress-name{
height:65rpx;
width: 150rpx;
margin-top: 10rpx;
line-height:65rpx;
font-size:24rpx;
color:#070A0C;
}
.normal-double-progress {
width: 600rpx;
height: 20rpx;
background-color: #F5F5F5;
border-radius: 10rpx;
white-space: nowrap;
}
.normal-progress-1 {
position: relative;
float: left;
height: 20rpx;
width: 0;
background-color: #FF8650;
border-radius: 10rpx;
overflow: hidden;
}
.normal-progress-2 {
position: relative;
height: 20rpx;
width: 0;
background-color: #1C80F1;
}
.wh{
width:100%;
overflow: hidden;
border-radius: 40rpx;
}
.iv_give_like {
position: absolute;
top: 48rpx;
right: -14rpx;
width: 70rpx;
height: 70rpx;
opacity: 0;
}
编写逻辑
我们在.js文件中编写进度条增长动画逻辑
/**
* 页面的初始数据
*/
data: {
arrProgress: [
{
"name": "展示",
"animation1": {},
"animation2": {},
"animation3": {}
},
{
"name": "展示",
"animation1": {},
"animation2": {},
"animation3": {}
},
{
"name": "展示",
"animation1": {},
"animation2": {},
"animation3": {}
},
{
"name": "展示",
"animation1": {},
"animation2": {},
"animation3": {}
}
],
arrPre1 : [50,40,60,100],
arrPre2 : [80,60,70,100]
},
上面初始化了5个进度条并定义了最终的长度
然后在onLoad中进行监听页面加载
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.progress2Animation(this.data.arrPre1, this.data.arrPre2)
},
这里是主要的逻辑，创建动画createAnimation,并给数组每一个添加动画，计算width的长度并定义增长的时间，最后当到达100时则展示最终动效
progress2Animation: function (arrPre1, arrPre2) {
var arrNew = [];
for (var i = 0; i
var pre1 = arrPre1[i];
var animation1 = wx.createAnimation({
duration: 500
})
var animation2 = wx.createAnimation({
duration: 500
})
var animation3 = wx.createAnimation({
duration: 500
})
if(pre1 > 100){
pre1 = 100
}
animation1.width(pre1 * 6 + 'rpx').step();
animation2.width(pre1 * 6 + 'rpx').step();
animation3.translateX(pre1 * 6 + 'rpx').step();
var oldProgress = this.data.arrProgress[i];
oldProgress.animation1 = animation1.export();
oldProgress.animation2 = animation2.export();
oldProgress.animation3 = animation3.export();
arrNew.push(oldProgress)
}
this.setData({
arrProgress: arrNew,
});
var blockThis = this;
setTimeout(()=>{
blockThis.animate('.iv_give_like', [
{ opacity: 1, scale: [0.9, 0.9] },
{ opacity: 1, scale: [1.2, 1.2] },
{ opacity: 1, scale: [1, 1] },
{ opacity: 1, scale: [1.1, 1.1] },
{ opacity: 1, scale: [1, 1] }
],400, function() {
}.bind(blockThis))
},600)
setTimeout(function () {
arrNew = [];
for (var i = 0; i
var pre2 = arrPre2[i];
var animation1 = wx.createAnimation({
duration: 500
})
var animation3 = wx.createAnimation({
duration: 500
})
if(pre2 > 100){
pre2 = 100
}
animation1.width(pre2 * 6 + 'rpx').step();
animation3.translateX(pre2 * 6 + 'rpx').step();
var oldProgress = blockThis.data.arrProgress[i];
oldProgress.animation1 = animation1.export();
oldProgress.animation3 = animation3.export();
arrNew.push(oldProgress)
}
blockThis.setData({
arrProgress: arrNew
})
}, 500)
},
这样效果就完成了
万圣节又叫诸圣节，在每年的11月1日，是西方的传统节日；而万圣节前夜的10月31日是这个节日最热闹的时刻。在中文里，常常把万圣节前夜
