后台返回数据需要自己匹配图标,图标命名与后台返回的变量保持一致

2024-04-03 19:12

本文主要是介绍后台返回数据需要自己匹配图标,图标命名与后台返回的变量保持一致,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

testItemId为后台返回匹配图标的变量名 

sportsTargetsData:{suggestSportTargetId: "2",unlocks: [{ testItemId: 'vo2max_high_knee', sportTargetName: '心肺能力', indexName: '心肺能力', sportTargetId: '1' },{ testItemId: 'grip_strength', sportTargetName: '基础力量', indexName: '基础力量', sportTargetId: '1' },{ testItemId: 'hwbc_jz', sportTargetName: '减脂', indexName: '减脂', sportTargetId: '2' },{ testItemId: 'hwbc_zj', sportTargetName: '增肌', indexName: '增肌', sportTargetId: '3' },{ testItemId: 'oneleg_stand', sportTargetName: '平衡性', indexName: '平衡性', sportTargetId: '4' },{ testItemId: 'vertical_jump', sportTargetName: '爆发力', indexName: '爆发力', sportTargetId: '5' },],locks: [{ testItemId: 'reaction_duration', sportTargetName: '灵敏性', indexName: '跳绳', sportTargetId: '1' },{ testItemId: 'body_bend', sportTargetName: '柔韧性', indexName: '卷腹', sportTargetId: '2' },{ testItemId: 'pushup_situp', sportTargetName: '肌肉耐力', indexName: '哑铃', sportTargetId: '3' },]
} ,//接口数据

图标命名:

html:

      <block wx:for="{{ sportsTargetsData.unlocks }}" wx:key="index"><view class="sports-goals-item {{ index==activeIdx ? ' targetActive' : '' }}" catchtap="changeTarget" data-index="{{ index }}"><!-- 图标直接使用item.testItemId --><image class="sports-goals-item-img" src="/static/image/sports/{{ index === activeIdx ? 'active_' + item.testItemId : item.testItemId }}.png" mode="" /><view class="sports-goals-item-text">{{ item.sportTargetName }}</view></view></block>

这篇关于后台返回数据需要自己匹配图标,图标命名与后台返回的变量保持一致的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/873744

相关文章

python处理带有时区的日期和时间数据

《python处理带有时区的日期和时间数据》这篇文章主要为大家详细介绍了如何在Python中使用pytz库处理时区信息,包括获取当前UTC时间,转换为特定时区等,有需要的小伙伴可以参考一下... 目录时区基本信息python datetime使用timezonepandas处理时区数据知识延展时区基本信息

Qt实现网络数据解析的方法总结

《Qt实现网络数据解析的方法总结》在Qt中解析网络数据通常涉及接收原始字节流,并将其转换为有意义的应用层数据,这篇文章为大家介绍了详细步骤和示例,感兴趣的小伙伴可以了解下... 目录1. 网络数据接收2. 缓冲区管理(处理粘包/拆包)3. 常见数据格式解析3.1 jsON解析3.2 XML解析3.3 自定义

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controll

Java中的工具类命名方法

《Java中的工具类命名方法》:本文主要介绍Java中的工具类究竟如何命名,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java中的工具类究竟如何命名?先来几个例子几种命名方式的比较到底如何命名 ?总结Java中的工具类究竟如何命名?先来几个例子JD

Pandas统计每行数据中的空值的方法示例

《Pandas统计每行数据中的空值的方法示例》处理缺失数据(NaN值)是一个非常常见的问题,本文主要介绍了Pandas统计每行数据中的空值的方法示例,具有一定的参考价值,感兴趣的可以了解一下... 目录什么是空值?为什么要统计空值?准备工作创建示例数据统计每行空值数量进一步分析www.chinasem.cn处

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

Nginx location匹配模式与规则详解

《Nginxlocation匹配模式与规则详解》:本文主要介绍Nginxlocation匹配模式与规则,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、环境二、匹配模式1. 精准模式2. 前缀模式(不继续匹配正则)3. 前缀模式(继续匹配正则)4. 正则模式(大

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr