做的账单每月支出收入和剩余的进度条
之前想了很多复杂的方法 结果这么简单就可以实现
wxml
<view class='top'>
<view class='topBox'>
<view class='topLittleBOX-1'>本月收入</view>
<view class='topLittleBOX-2'>
<view class='row-1' style='width:{{row1}}rpx'></view>
<view class='rowText'>{{inmoney}}</view>
</view>
</view>
<view class='topBox'>
<view class='topLittleBOX-1'>本月支出</view>
<view class='topLittleBOX-2'>
<view class='row-2' style='width:{{row2}}rpx'></view>
<view class='rowText'>{{cost}}</view>
</view>
</view>
<view class='topBox'>
<view class='topLittleBOX-1'>本月结余</view>
<view class='topLittleBOX-2'>
<view class='row-3' style='width:{{row3}}rpx'></view>
<view class='rowText'>{{little}}</view>
</view>
</view>
</view>
wxss
/*top begin */
.top {
height: 290rpx;
background-color: white;
}
.tabbar {
width: 100%;
height: 100rpx;
position: absolute;
bottom: 0;
background-color: white;
}
.topBox {
padding-left: 30rpx;
padding-top: 50rpx;
display: flex;
flex-direction: row;
}
.topLittleBOX-1 {
font-size: 30rpx;
color: #4c4c4c;
}
.topLittleBOX-2 {
padding-left: 50rpx;
display: flex;
flex-direction: row;
}
.row-1 {
width: 305rpx;
height: 30rpx;
background-color: #3edd24;
border-radius: 20rpx;
}
.row-2 {
width: 380rpx;
height: 30rpx;
background-color: #dd2446;
border-radius: 20rpx;
}
.row-3 {
width: 95rpx;
height: 30rpx;
background-color: #ddc124;
border-radius: 20rpx;
}
.rowText {
margin-left: 10rpx;
font-size: 30rpx;
color: #4c4c4c;
}
/*top end */
js(根据最大的数字 取到单位)
Page({
data: {
inmoney: 400.00,
cost: 1000.00,
little: -200.00,
row1: "",
row2: "",
row3: "",
},
onLoad: function() {
var list5 = [this.data.inmoney, this.data.cost, this.data.little];
var max = Math.max.apply(null, list5 );
console.log(max)
var unit = 380/max;
console.log(unit)
this.setData({
row1: list5[0]*unit,
row2: list5[1] * unit,
row3: list5[2] * unit,
})
}
})