微信小程式 進度條 長度根據數字自適應
阿新 • • 發佈:2019-01-09
做的賬單每月支出收入和剩餘的進度條
之前想了很多複雜的方法 結果這麼簡單就可以實現
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, }) } })