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

淩亂°似流年 2022-12-16 13:03 232阅读 0赞

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

显示：

![format_png][]

[format_png]: /images/20221123/5cef178ae3894f2d854c1de88a5f26cd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，232人围观）

还没有评论，来说两句吧...

相关阅读

相关 echars顶部显示数据，并且格式化为百分比

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

快来打我*/ 2023年07月17日 09:47/ 0 赞/ 7 阅读

相关小程序根据返回值是否为空判断标签是否显示

如果为空，则不显示奖励这两个字的标签 wxml <view class="cu-item" wx:for="{ {allSignList}}" wx

川长思鸟来/ 2022年12月24日 06:54/ 0 赞/ 261 阅读

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

wxml: <view >{ { precent + '%'}}</view> <text >{ {welfare_list

淩亂°似流年/ 2022年12月16日 13:03/ 0 赞/ 233 阅读

相关小程序根据返回值英文渲染出对应的中文

需求：后端返回值为英文，在渲染的时候，将英文所对应的中文意识渲染到前端页面。然后每种不同的状态渲染完之后给到不同的颜色进行区分。对照 NORMAL -----

╰+攻爆jí腚メ/ 2022年12月15日 03:37/ 0 赞/ 159 阅读

相关微信小程序根据返回值判断状态

json { "msg": "查询成功", "total": 25, "code": 1, "rows": [{

末蓝、/ 2022年10月12日 01:26/ 0 赞/ 21 阅读

相关小程序根据返回值的int类型渲染不同的状态

需求：返回值里面有 0,1,2,3,4 分别代表面试，开会，拜访顾客，项目实施，其他这5中类型，需要将获取到的0,1,2,3,4渲染到页面上，分别显示所对应的类型状态面试，

拼搏现实的明天。/ 2022年10月11日 01:00/ 0 赞/ 146 阅读

相关微信小程序根据返回值判断状态

json { "msg": "查询成功", "total": 25, "code": 1, "rows

旧城等待，/ 2022年10月10日 09:44/ 0 赞/ 123 阅读

相关小程序根据返回值的int类型渲染不同的状态

需求：返回值里面有 0,1,2,3,4 分别代表面试，开会，拜访顾客，项目实施，其他这5中类型，需要将获取到的0,1,2,3,4渲染到页面上，分别显示所对应的类型状态面试，

布满荆棘的人生/ 2022年10月08日 15:20/ 0 赞/ 275 阅读

相关 Vue 根据接口返回值重新渲染界面

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例

逃离我推掉我的手/ 2022年05月11日 02:28/ 0 赞/ 417 阅读

相关 Oracle数据显示百分比

select round(sum( cast( nvl(1.68,0) as decimal(38,2)) ),2 ) || '%' from dual ![watermar

素颜马尾好姑娘i/ 2021年12月19日 20:43/ 0 赞/ 505 阅读