微信小程序(三十七)选项点击高亮效果

注释很详细,直接上代码

上一篇

新增内容:
1.选择性渲染类
2.以数字为需渲染内容(数量)

源码:

index.wxml

<view class="Area"><!-- {{activeNum===index?'Active':''}}是选择性添加类名进行渲染 --><view wx:for="{{4}}" wx:key="*this" bind:tap="onClick" mark:index="{{index}}" class="List {{activeNum===index?'Active':''}}">{{item}}</view>
</view>

index.wxss

page{background-color: floralwhite;
}.Area{display: flex;justify-content: center;flex-direction: column;align-items: center;
}.List{text-align: center;margin: 10rpx 0rpx;padding: 20rpx 160rpx;background-color: gray;border-radius: 30rpx;
}.Active{background-color: pink;
}

index.js


Page({data:{activeNum:0},onClick(e){//解构参数const {index}=e.markthis.setData({//参数赋值activeNum:index})}
})

效果演示:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RCS系统之:机器人状态

在设计RCS系统平台时&#xff0c;机器人总共设计状态有&#xff1a; 离线模式&#xff1b; 如图&#xff0c;18号机器人呈灰黑色&#xff0c;表示机器人没有上电状态 工作模式&#xff1b; 如图&#xff0c;10号机器人成绿色&#xff0c;表示机器人处于工作模式&#xff0c;等…

关于TDSQL(MySQL)的简单知识分享

0. 前言 最近在系统改造过程中&#xff0c;接触到了国产分布式数据库TDSQL&#xff0c;记录一下关于TDSQL的部分知识点。 1. TDSQL简介 TDSQL是腾讯推出的一款兼容MySQL的自主可控、高一致性分布式数据库产品。 1.1 TDSQL优点&#xff1a; 数据强一致性高性能低成本线性水…

前端JavaScript篇之for...in和for...of的区别

目录 for...in和for...of的区别for...in循环for...of循环区别&#xff1a; for…in和for…of的区别 在JavaScript中&#xff0c;for...in和for...of是两种常用的循环语法&#xff0c;它们有着明显的区别和适用场景。 for...in循环 for...in循环用于遍历一个对象的所有可枚举…

引入echarts环形图及显示后端数据

实现效果&#xff1a; 1.下载echarts 并引用 npm install echarts --save 或 pnpm install -S echarts 项目中引用&#xff1a; 在项目main.ts中 import * as echarts from "echarts"; //引入echarts 3.页面中使用 <div id"main" class&quo…

Topaz Photo AI for Mac v2.3.1 补丁版人工智能降噪软件无损放大

想要将模糊的图片变得更加清晰&#xff1f;不妨试试Topaz Photo AI for Mac 这款人工智能、无损放大软件。Topaz Photo AI for Mac 一款强大的人工智能降噪软件&#xff0c;允许用户使用复杂的锐化算法来提高图像清晰度&#xff0c;还包括肖像编辑选项&#xff0c;如面部重塑、…

C#在既有数组中插入另一个数组:Array.Copy方法 vs 自定义插入方法

目录 一、使用的方法 1.使用Array.Copy方法 2.Copy(Array, Int32, Array, Int32, Int32) 3. 使用自定义的方法 二、实例 1.示例1&#xff1a;使用Array.Copy方法 2.示例2&#xff1a;使用自定义的方法 一、使用的方法 1.使用Array.Copy方法 首先定义了一个名为InsertAr…

Mysql大表添加字段失败解决方案

背景 最近遇到一个问题&#xff0c;需要在user用户表千万级别数据中添加两个字段&#xff0c;发现老是加不上去&#xff0c;一直卡死。表数据量不仅大&#xff0c;而且是一个热点表&#xff0c;访问频率特别高&#xff0c;而且该表的访问是在一个大事务中。加字段的时候一直在…

人工智能福利站,初识人工智能,图神经网络学习,第三课

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

人工智能|深度学习——基于全局注意力的改进YOLOv7-AC的水下场景目标检测系统

代码下载&#xff1a; 基于全局注意力的改进YOLOv7-AC的水下场景目标检测系统.zip资源-CSDN文库 1.研究的背景 水下场景目标检测是水下机器人、水下无人机和水下监控等领域中的重要任务之一。然而&#xff0c;由于水下环境的复杂性和特殊性&#xff0c;水下目标检测面临着许多挑…

读千脑智能笔记06_人工智能的未来(上)

1. 人工智能正在经历一场复兴&#xff0c;这是科技界最热门的领域之一 1.1. 大多数科学进步都建立在被广泛接受的理论框架之上。这种理论框架称为“科学范式” 1.2. 人工智能的未来将与大多数人工智能从业者如今的设想存在本质上的不同 1.3. 人工神经网络与人类大脑中的神经…

ChatGPT高效提问—prompt常见用法

ChatGPT高效提问—prompt常见用法 1.1 角色扮演 ​ prompt最为常见的用法是ChatGPT进行角色扮演。通常我们在和ChatGPT对话时&#xff0c;最常用的方式是一问一答&#xff0c;把ChatGPT当作一个单纯的“陪聊者”。而当我们通过prompt为ChatGPT赋予角色属性后&#xff0c;即使…

JCTC | 利用几何深度学习对蛋白质-配体结合pose进行等变灵活建模

Overview 该论文解决了药物开发中蛋白质-配体复合结构灵活建模的挑战。作者提出了一种名为FlexPose的新型深度学习框架&#xff0c;它可以直接对复杂结构进行建模&#xff0c;而不需要传统的采样和评分策略。 该模型结合了标量-向量双特征表示和 SE(3)等变网络设计来处理动态结…