微信小程序 进度条 长度根据数字自适应

做的账单每月支出收入和剩余的进度条

之前想了很多复杂的方法 结果这么简单就可以实现

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,
    })

  }
})