小程序数据渲染根据返回值计算百分比并且显示

作者: 祈澈菇凉 | 来源:发表于2020-10-20 09:45 被阅读0次

wxml:

 <view >{{ precent + '%'}}</view>
 <text >{{welfare_list.welfareDO.haveForestCoin}}/{{welfare_list.welfareDO.forestCoin}}森林币</text>

Page({
  data: {
    welfare_list: [],
    welfareDO: {},
  },
  onLoad() {
    this.getWelfareList()
  },
  getWelfareList() {
    let that = this;
  
    wx.request({
      url: 'http://www.xxxxx.com/1.json',
      header: {
        'content-type': 'application/json',
      },
      success: res => {
        that.setData({
          welfare_list: res.data.data,
          welfareDO: res.data.data.welfareDO,
          precent: Math.round(res.data.data.welfareDO.haveForestCoin * 100 / res.data.data.welfareDO.forestCoin),
          
        })
      },
      fail: err => {
      }
    })
  },
});

json

{
    "msg": "操作成功",
    "code": "0000",
    "data": {
        "welfareDO": {
            "forestCoin": 10,
            "haveForestCoin": 7
        }
    }
}

显示：