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

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

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

显示:


相关文章
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
334 1
|
JSON 小程序 数据格式
微信小程序默认的文字内容在左上角怎么办?带你0基础快速了解skyline渲染模式。
本文主要介绍微信小程序开发中遇到的问题及其解决方法。问题通常由微信小程序自带的Skyline渲染模式引起,而非代码编写错误。解决步骤包括:1. 找到全局配置文件app.json;2. 去掉相关配置项;3. 修改后的配置示例。通过这些步骤可以有效解决文字内容顶格或覆盖的问题。文中还提供了进一步了解Skyline渲染模式的链接,帮助开发者深入理解其原理和应用。
1613 59
|
小程序 JavaScript 开发工具
微信小程序——全局数据共享
【10月更文挑战第5天】
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
缓存 小程序 API
微信小程序网络请求与API调用:实现数据交互
本文深入探讨了微信小程序的网络请求与API调用,涵盖`wx.request`的基本用法、常见场景(如获取数据、提交表单、上传和下载文件)及注意事项(如域名配置、HTTPS协议、超时设置和并发限制)。通过一个简单案例,演示了如何实现小程序与服务器的数据交互。掌握这些技能将帮助你构建功能更丰富的应用。
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
499 4
|
移动开发 小程序 数据可视化
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
443 4
|
小程序 JavaScript 开发工具
微信小程序——全局数据共享
微信小程序——全局数据共享
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用