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

时间:2022-07-28
本文章向大家介绍小程序数据渲染根据返回值计算百分比并且显示，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

wxml:

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

js

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

显示：

随机文章
本站知识点必读
最近更新