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

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/513001.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于YOLOV5+Pyqt5农作物叶片病害检测系统

1、引言 农作物病害的精准检测与识别是推动农业生产智能化与现代化发展的重要举措。随着计算机视觉技术的发展&#xff0c;深度学习方法已得到快速应用&#xff0c;利用卷积神经网络进行农作物病害检测与识别成为近年来研究的热点。基于传统农作物病害识别方法&#xff0c;分析…

瑞吉外卖实战学习--13、完善删除中的逻辑

完善删除中的逻辑 前言效果图逻辑介绍表结构根据mybatisPlus接口规范创建实体类和service和mapper文件1、实体类Dish和Setmeal2、Mapper接口DishMapper和SetealMapper3、Service接口DishService和setmealService4、Service实现类DishServiceImpl和setmealServicelmpl 编写删除函…

双榜有名!美创入围第一新声x天眼查「年度中国高科技高成长企业」系列榜单

为了更好地了解中国高科技高成长企业的现状和发展趋势&#xff0c;2023年底&#xff0c;【第一新声】特联合【天眼查】启动“数字未来”系列之2023年度中国高科技高成长企业系列榜单评选征集工作&#xff0c;发现和挖掘被资本市场关注&#xff0c;同时受客户认可的高科技、高成…

五、postman基础使用案例

postman基础使用 相关案例【传递查询参数】【提交表单数据】【提交JSON数据】 注&#xff1a;postman⼀款⽀持调试和测试的⼯具&#xff0c;开发、测试⼯程师都可以使⽤。方法一般统一为&#xff1a;方法→请求头→请求体→断言 相关案例 【传递查询参数】 访问TPshop搜索商品的…

高德定位 SDK 到底提供了什么服务?

最近我被高德的销售烦到不行&#xff0c;说是我用了他们的 SDK&#xff0c;现在 SDK 要收费。 表达是很绕的&#xff0c;什么授权啦&#xff0c;什么企业认证风险啦&#xff0c;讲了一堆&#xff0c;还跟我开始搬出协议了。感觉高德的销售真够垃圾的&#xff0c;编个话术都不会…

动态规划详细讲解c++|经典例题讲解认识动态规划|0-1背包问题详解

引言 uu们&#xff0c;你们好&#xff01;这次的分享是动态规划&#xff0c;其中介绍了动态规划的相关概念和做题模板&#xff08;三要素&#xff09;&#xff0c;同时为了uu们对动态规划方法有更加形象的认识&#xff0c;特地找了两个经典问题&#xff0c;和大家一起分析。并…

音频转换工具 Bigasoft FLAC Converter for Mac

Bigasoft FLAC Converter for Mac是一款专为Mac用户设计的音频转换工具&#xff0c;它能够将FLAC音频文件高效、高质量地转换为其他常见的音频格式&#xff0c;如MP3、AAC等。这款软件具有直观易用的界面&#xff0c;使用户能够轻松上手&#xff0c;无需复杂的操作步骤即可完成…

SpringBoot整合Lombok以及各种使用技巧

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉🍎个人主页:Leo的博客💞当前专栏: 循序渐进学SpringBoot ✨特色专栏: MySQL学习 🥭本文内容: SpringBoot整合Lombok以及各种使用技巧 📚个人知识库: Leo知识库,欢迎大家访…

C语言内存函数,让内存管理更高效!

1. memcpy使⽤和模拟实现 2. memmove使⽤和模拟实现 3. memset函数的使⽤ 4. memcmp函数的使⽤ 正文开始&#xff1a; 1. memcpy 使⽤和模拟实现 void * memcpy ( void * destination, const void * source, size_t num ); • 函数memcpy从source的位置开始向后复…

【C++】前缀和

目录 一维前缀和二维前缀和 一维前缀和 #include <iostream> using namespace std; #include <vector> int main() {int n,q;cin >> n >> q;vector<long long> arr(n1);for(int i 1;i<n;i){cin >> arr[i];}//创造前缀和数组vector<l…

安卓Activity上滑关闭效果实现

最近在做一个屏保功能&#xff0c;需要支持如图的上滑关闭功能。 因为屏保是可以左右滑动切换的&#xff0c;内部是一个viewpager 做这个效果的时候&#xff0c;关键就是要注意外层拦截触摸事件时&#xff0c;需要有条件的拦截&#xff0c;不能影响到内部viewpager的滑动处理…

linux设置Nacos自启动

前提&#xff1a;已经安装好nacos应用 可参考&#xff1a;Nacos单机版安装-CSDN博客 1. 创建nacos.service 1.1 在 /lib/systemd/system 目录底下&#xff0c;新建nacos.service文件 [Unit] Descriptionnacos Afternetwork.target[Service]Typeforking# 单机启动方式&#…

OpenLayers6实战,OpenLayers实现鼠标拖拽方式绘制梯形

专栏目录: OpenLayers实战进阶专栏目录 前言 本章讲解如何使用OpenLayers实现鼠标拖拽方式绘制梯形。点击鼠标拖拽梯形,松开鼠标后绘制完成。 二、依赖和使用 "ol": "^6.15.1"使用npm安装依赖npm install ol@6.15.1使用Yarn安装依赖yarn add olvue中…

磁盘提示格式化?别慌,这里有救星!

在使用电脑的过程中&#xff0c;突然遇到磁盘提示需要格式化的情况&#xff0c;确实让人感到焦虑不已。毕竟&#xff0c;这意味着存储在磁盘上的重要数据可能面临丢失的风险。然而&#xff0c;在恐慌之余&#xff0c;我们更应该冷静应对&#xff0c;寻找有效的数据恢复方案。本…

人工智能|深度学习——基于Xception实现戴口罩人脸表情识别

一、项目背景 近年来&#xff0c;随着人工智能技术的不断发展&#xff0c;人脸表情识别已经成为了计算机视觉领域中的重要研究方向之一。然而&#xff0c;在当前的疫情形势下&#xff0c;佩戴口罩已经成为了一项必要的防疫措施&#xff0c;但是佩戴口罩会遮挡住人脸的部分区域&…

如何备份 Outline 导出的 Markdown 文件

前面&#xff0c;我撰写了两篇文章&#xff0c;介绍了&#xff1a; 《如何在本地环境安装 Outline》《使用 Outline 搭建企业、个人知识库面临的问题》 今天&#xff0c;我们继续这个话题。使用 Outline 搭建知识库&#xff0c;如何备份自己知识库内的资料。 Outline 底层使用…

VTK| VTK可视化流程+圆锥示例

要想入门vtk&#xff0c;了解vtk的可视化流程是非常有必要的。 VTK可视化流程 VTK可视化流程主要分为数据处理和渲染两个过程&#xff0c;有一张不错的可视化流程图把这个过程理解为一个舞台剧。 VTKVS运行圆锥示例 先来运行一个简单的示例代码来理解VTK运作的过程&#xff…

薅熊链Berachain测试网空投

Berachain 是 Layer1 的一条公链。 Berachain 的经济模型引入了三种代币 BERA&#xff08;原生 Gas 代币&#xff09;&#xff1a;Bearchain 的Gas TokenBGT: Berachain 的治理 Token。 在权益证明&#xff08;Proof-of-Stake&#xff09;区块链中&#xff0c;治理通证通常用于…

一套C#自主版权+应用案例的手麻系统源码

手术麻醉信息管理系统源码&#xff0c;自主版权应用案例的手麻系统源码 手术麻醉信息管理系统包含了患者从预约申请手术到术前、术中、术后的流程控制。手术麻醉信息管理系统主要是由监护设备数据采集子系统和麻醉临床系统两个子部分组成。包括从手术申请到手术分配&#xff0c…

LeetCode-热题100:142. 环形链表 II

题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内…