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

注释很详细,直接上代码

上一篇

新增内容:
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.mzph.cn/news/673353.shtml

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

相关文章

深兰科技“华佗”医用红外热像仪正式获批国家医疗器械二类证

近日&#xff0c;深兰科技自主研发生产的医用红外热像仪&#xff0c;经国家食药监局严格审查&#xff0c;顺利通过了国家药品监督局的医疗器械产品认证&#xff0c;拿到了国家二类医疗器械注册证。这标志着深兰科技“华佗”医用红外热像仪的产品性能和质量均已达到国家标准&…

nacos安装手册

1. 单机模式 1.1 准备安装介质 nacos-server-2.1.1.tar.gz1.2 环境准备 1台服务器安装JDK 1.8 1.3 解压 tar-zxvf nacos-server-2.1.1.tar.gz1.4 启动 进入解压的nacos目录&#xff0c;进入bin目录&#xff0c;运行&#xff1a; ./startup.sh -m standalone1.5 验证 na…

互联网加竞赛 基于深度学习的行人重识别(person reid)

文章目录 0 前言1 技术背景2 技术介绍3 重识别技术实现3.1 数据集3.2 Person REID3.2.1 算法原理3.2.2 算法流程图 4 实现效果5 部分代码6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的行人重识别 该项目较为新颖&#xff0c;适合…

已解决:tpm2_createpriimay: command not found

出现错误如下&#xff1a; ERROR: Could not change hierarchy for Owner. TPM Error:0x9a2 ERROR: Could not change hierarchy for Endorsement. TPM Error:0x9a2 ERROR: Could not change hierarchy for Lockout. TPM Error:0x98e ERROR: Unable to run tpm2_takeownership…

【es】解决es报错failed to authenticate user [elastic]

【es】解决es报错failed to authenticate user [elastic] 1.背景 某天使用接口查询es数据时出现报错&#xff0c;没有返回数据。想到是测试环境的es因为没内存又挂了&#xff0c;于是上服务器重启服务。 但是重启后等待一段时间再次查询es&#xff0c;还是同样报错&#xff0…

github使用问题汇总

1. Permission denied 1.1. 问题描述 Permission denied (publickey). fatal: Could not read from remote repository. 1.2. 解决方法 生成公钥 ssh-keygen -t ed25519 -C "your_emailexample.com" 点击回车三次 Generating public/private ed25519 key pair. …

无法获取auth_request返回的标头和状态码

这里写自定义目录标题 欢迎使用Markdown编辑器 欢迎使用Markdown编辑器 我有以下测试nginx配置&#xff1a; user nginx; worker_processes auto;error_log /dev/stderr debug; pid /var/run/nginx.pid;events {worker_connections 1024; }http {include /et…

02.02_111期_C++_模板笔记

使用函数模板 实现一个函数就可以起到上面三个函数才能起到的作用 当数据类型是int时&#xff0c;编译器生成一个函数&#xff0c;其形参类型都是int 当数据类型时double时&#xff0c;编译器生成一个函数&#xff0c;其形参类型都是double 在写入template<typename T>这…

Idea:Idea导入Module、子Module的方式及其可能遇到的问题

参考&#xff1a;https://blog.csdn.net/qjyws/article/details/127617536 1.父module的maven添加sub module xxx-module-xxx-api xxx-module-xxx-biz 2.project structure–>import module–>添加sub module 3.maven–>Reload project即可

为什么大模型需要向量数据库?

AIGC 时代万物都可以向量化&#xff0c;向量化是 LLM 大模型以及 Agent 应用的基础。 比如&#xff1a;爆火的 Google 大模型 Gemini 1.0 原生支持的多模态&#xff0c;在预训练的时候就是把文本、图片、音频、视频等多模态先进行 token 化&#xff0c;然后构建一维的“语言”…

深掘开源安全需求,破解开源治理难题

当下&#xff0c;中国金融科技行业在数字支付、数字信贷、金融风控等领域取得了很多创新成果&#xff0c;大幅提升了金融数字化和智能化水平&#xff0c;已经在金融科技的全球竞争中走在前列。 在此进程中&#xff0c;开源技术发挥了不可或缺的重要作用&#xff0c;根据我国金…

MySQL视图和索引

一、视图 1.什么是视图 MySQL 视图&#xff08;View&#xff09;是一种虚拟存在的表&#xff0c;同真实表一样&#xff0c;视图也由列和行构成&#xff0c;但视图并不实际存在于数据库中。行和列的数据来自于定义视图的查询中所使用的表&#xff0c;并且还是在使用视图时动态…

双非本科准备秋招(19.2)—— 设计模式之保护式暂停

一、wait & notify wait能让线程进入waiting状态&#xff0c;这时候就需要比较一下和sleep的区别了。 sleep vs wait 1) sleep 是 Thread 方法&#xff0c;而 wait 是 Object 的方法 2) sleep 不需要强制和 synchronized 配合使用&#xff0c;但 wait 强制和 s…

航芯ACM32G103开发板评测 06 1.28圆形屏幕 LVGL移植

航芯ACM32G103开发板评测 06 1.28圆形屏幕 LVGL移植 软硬件平台 航芯ACM32G103开发板1.28寸圆形彩色TFT显示屏高清IPS 模块240X240 SPI接口 GC9A01驱动芯片LVGL V8.3.1源码 LVGL LVGL&#xff08;Light and Versatile Graphics Library&#xff09;是一个免费的开源图形库&…

微信小程序实现吸顶、网格、瀑布流布局

微信小程序开发通常是在webview模式下编写&#xff0c;但是对小程序的渲染性能有一定的追求&#xff0c;就需要使用Skyline模式进行渲染&#xff0c;同时在这种模式下有也有一些特殊的组件&#xff0c;可以轻松的实现想要的效果&#xff0c;本文将介绍在Skyline模式下如何实现吸…

【iOS ARKit】人形提取

为解决人形分离和深度估计问题&#xff0c;ARKit 新增加了 Segmentation Buffer&#xff08;人体分隔缓冲区&#xff09;和Estimated Depth Data Buffer&#xff08;深度估计缓冲区&#xff09;两个缓冲区。人体分隔缓冲区作用类似于图形渲染管线中的 Stencil Buffer&#xff0…

进程状态 | 僵尸进程 | 孤儿进程 | 前台后台进程 | 守护进程

文章目录 1.进程的三种基本状态2.Linux中进程状态查看2.1.进程检测脚本2.2.各种状态查看 3.孤儿进程4.前台、后台、守护进程 1.进程的三种基本状态 进程的在系统当中是走走停停的&#xff0c;「运行 - 暂停 - 运行」的活动规律&#xff1b;进程在活动期间的三种状态&#xff1…

【leetcode题解C++】450.删除二叉搜索树中的节点 and 669.修剪二叉搜索树 and 108.将有序数组转换为二叉搜索树

450. 删除二叉搜索树中的节点 给定一个二叉搜索树的根节点 root 和一个值 key&#xff0c;删除二叉搜索树中的 key 对应的节点&#xff0c;并保证二叉搜索树的性质不变。返回二叉搜索树&#xff08;有可能被更新&#xff09;的根节点的引用。 一般来说&#xff0c;删除节点可…

分别通过select、多进程、多线程实现一个并发服务器

select #include<myhead.h>#define PORT 8888 //端口号 #define IP "192.168.114.109" //IP地址int main(int argc, const char *argv[]) {//1、创建用于接受连接的套接字int sfd socket(AF_INET, SOCK_STREAM, 0);if(sfd -1){perror(&q…

【Langchain+Streamlit】旅游聊天机器人

【LangchainStreamlit】打造一个旅游问答AI-CSDN博客 项目线上地址&#xff0c;无需openai秘钥可直接体验&#xff1a;http://101.33.225.241:8502/ github地址&#xff1a;GitHub - jerry1900/langchain_chatbot: langchainstreamlit打造的一个有memory的旅游聊天机器人&…