微信小程序:实现列表单选

 效果

代码

 wxml

<view class="all"><view class="item_all" wx:for="{{info}}" wx:key="index"><view class='position {{item.checked?"checked_parameter":""}}' data-id="{{item.employee_num}}" bindtap='selectcustomer'><view class="vv_1">{{item.num_name}}</view></view></view>
</view>

wxss

/* 列表 */
.item_all {/* border: 1px solid black; */margin-bottom: 3%;width: 100%;
}.position {display: flex;flex-direction: column;justify-content: center;height: 80px;border-radius: 10px;background-color: #fff;box-shadow: 2px 2px 2px gainsboro;
}.vv_1 {margin-left: 5%;word-break: break-all;
}/* 选中之后的样式设置 */
.checked_parameter {background-color: #74bfe7;color: #fff;
}

js 

const app = getApp()
Page({data: {info: [{employee_num: 1001,employee_name: '张三',checked: false,num_name: '1001-张三'},{employee_num: 1002,employee_name: '李四',checked: false,num_name: '1002-李四'}, {employee_num: 1003,employee_name: '王五',checked: false,num_name: '1003-王五'}, {employee_num: 1004,employee_name: '赵六',checked: false,num_name: '1004-赵六'}],parameterList: ''},// 参数点击响应事件selectcustomer: function (e) {var this_checked = e.currentTarget.dataset.id //获取对应的条目idvar parameterList = this.data.info //获取Json数组console.log(this_checked)for (var i = 0; i < parameterList.length; i++) {if (parameterList[i].employee_num == this_checked) {parameterList[i].checked = true; //当前点击的位置为true即选中this.setData({parameterList:parameterList[i]})console.log('参数', this.data.parameterList)} else {parameterList[i].checked = false; //其他的位置为false}}this.setData({info:parameterList})},
})

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

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

相关文章

20231008工作心得:sql

1.SQL语句里的if的嵌套使用 if(product A and brand_name B,C,if(product A and brand_name !B,D,product)) as product if&#xff08;A,B,C&#xff09;。SQL里if函数&#xff0c;如果条件A成立&#xff0c;就显示B的值&#xff0c;否则就显示C。 这个代码的意思的&#x…

一文读懂Base64

这几天在和第三方交互的时候&#xff0c;对方返回的数据是base64格式的数据&#xff0c;所以这两天又彻底捋了下Base64的来龙去脉。之前看过一篇文章说的非常好&#xff08;再找到给加上链接&#xff09;&#xff0c;我在这不详细说明了&#xff0c;只说转换过程。 还是使用中…

DiffusionDet:第一个用于物体检测的扩散模型(DiffusionDet: Diffusion Model for Object Detection)

提出了一种新的框架——DiffusionDet&#xff0c;它将目标检测定义为一个从有噪声的盒子到目标盒子的去噪扩散过程。在训练阶段&#xff0c;目标盒从真实值盒扩散到随机分布&#xff0c;模型学会了逆转这个噪声过程。 在推理中&#xff0c;该模型以渐进的方式将一组随机生成的框…

Uniapp 新手专用 抖音登录 获取用户头像、名称、openid、unionid、anonymous_openid、session_key

TC-dylogin 一定请选择 源码授权版 教程 第一步 将代码拷贝至您所需要的页面 该代码位置&#xff1a;pages/index.vue 第二步 修改appid和secret 第三步 获取appid和secret 获取appid和secret链接 注意事项 为了安全&#xff0c;我将默认的自己的appid和secret在云函数中删…

图片调色盘

图片预览 配置安装 Color-Thief 安装包使用文档 yarn add colorthief -S // npm install colorthief --save代码 <template><div class"img-thief"><div class"container"><div class"thief-item" v-for"(item, in…

【Spring】Spring MVC 程序开发

Spring MVC 程序开发 一. 什么是 Spring MVC1. MVC2. Spring、Spring Boot 与 Spring MVC 二. 创建 Spring MVC 项目1. 创建项目2. 用户和程序的映射3. 获取用户请求参数①. 获取单个参数②. 获取多个参数③. 传递对象④. 后端参数重命名&#xff08;后端参数映射&#xff09;R…

【初识Jmeter】【接口自动化】

jmeter的使用笔记1 Jmeter介绍与下载安装介绍安装配置配置与扩展组件 jmeter的使用基本功能元素登陆请求与提取cookie其他请求接口关联Cookie-响应成功聚合报告查看 Jmeter介绍与下载安装 介绍 jmeter是apache公司基于java开发的一款开源压力测试工具&#xff0c;体积小&…

基于卷积神经网络的图像识别-案例实施1

案例描述 学习如何搭建CNN卷积神经网络&#xff0c;训练cifar-10数据&#xff0c;识别图片中的内容。 案例分析 cifar-10是由Hinton的学生Alex Krizhevsky和Ilya Sutskever整理的一个用于识别普适物体的小型数据集。一共包含 10个类别的 RGB 彩色图 片&#xff1a;飞机&…

节日灯饰灯串灯出口欧洲CE认证检测

灯串&#xff08;灯带&#xff09;&#xff0c;这个产品的形状就象一根带子一样&#xff0c;再加上产品的主要原件就是LED&#xff0c;因此叫做灯串或者灯带。2022年&#xff0c;我国灯具及相关配件产品出口总额超过460亿美元。其中北美是最大的出口市场。其次是欧洲市场&#…

【网络安全---XSS漏洞(1)】XSS漏洞原理,产生原因,以及XSS漏洞的分类。附带案例和payload让你快速学习XSS漏洞

以pikachu靶场为例子进行讲解&#xff0c;pikachu靶场的搭建请参考以下博客&#xff1b; 【网路安全 --- pikachu靶场安装】超详细的pikachu靶场安装教程&#xff08;提供靶场代码及工具&#xff09;_网络安全_Aini的博客-CSDN博客【网路安全 --- pikachu靶场安装】超详细的pi…

JavaEE初阶学习:HTTP协议和Tomcat

1. HTTP协议 HTTP协议是一个非常广泛的应用层协议~~ 应用层协议 —> TCP IP 协议栈 应用层 —> 关注数据怎么使用~ 传输层 —> 关注的是整个传输的起点和终点 网络层 —> 地址管理 路由选择 数据链路层 —> 相邻节点之间的数据转发 物理层 —> 基础设置,硬…

【数据结构】链表详解

大家好&#xff0c;今天为大家分享一下第二个数据结构——单链表 先打个广告&#xff1a;这里是博主写道顺序表&#xff0c;大家也可以查看&#xff1a;顺序表详解 首先&#xff1a; 我们学完顺序表的时候&#xff0c;我们发现有以下问题&#xff1a; 中间/头部的插入删除&…

tcpdump(四)命令行参数讲解(三)

一 BPF高级过滤条件 高级filter官方地址 常见需求案例汇总 过滤的目的&#xff1a;获取最精细、准确的数据思考&#xff1a; 抓取更精确的包?1) tcp/ip 报文结构要精通,这样才能知道如何获取自己想要的信息 -> 偏移量2) tcpdump 的synax语法要精通,要正确写对3) 多练习…

MES生产执行解决方案提供商,可定制工厂MES精益制造管理系统-亿发

亿发智能制造MES系统&#xff1a;驱动制造业创新&#xff0c;实现数字化生产和管理 MES管理系统以实时协同思想为核心&#xff0c;着重于精益生产计划的实施和车间实时调度。对生产现场和业务经营的数据进行全面的系统化管理&#xff0c;以数据分析的结果为基础&#xff0c;协助…

大数据与Hadoop入门理论

一、大数据的3种数据类型 1、结构化数据 可定义&#xff0c;有类型、格式、结构的强制约束 如&#xff1a;RDBMS&#xff08;关系型数据库管理系统&#xff09; 2、非结构化数据 没有规律没有数据约束可言&#xff0c;很复杂难以解析 如&#xff1a;文本文件&#xff0c;视…

vue脚手架项目创建及整理

环境准备 首先安装node,如果项目需要指定node版本 可以按装nvm控制版本 创建vue vue create 项目名选择对应版本 这边我是选的自定义&#xff0c;就是第三个选项&#xff0c;可以提前给我下好 router vuex什么的&#xff08;空格&#xff09; 选项如图标注 等待下载所需的…

记录在搭建Jenkins时,所遇到的坑,以及解决方案

项目场景&#xff1a; 记录在搭建Jenkins时,所遇到的坑,以及解决方案.问题描述1 在使用Jenkins构建时,报错如下&#xff1a; cp: cannot stat /project/xx/xxxx/dist/: No such file or directory Build step Execute shell marked build as failure Finished: FAILURE解决方…

接口测试复习Requests PyMysql Dubbo

一。基本概念 接口概念&#xff1a;系统与系统之间 数据交互的通道。 接⼝测试概念&#xff1a;校验 预期结果 与 实际结果 是否⼀致。 特征&#xff1a; 测试⻚⾯测试发现不了的问题。&#xff08;因为&#xff1a;接⼝测试 绕过前端界⾯。 &#xff09; 符合质量控制前移理…

Jupyter notebook怎么设置自动跳转问题

1.点击开始&#xff0c;就可以看到Jupyter&#xff0c;然后点击 2.结果就这样&#xff1a; 3你可以复制地址到浏览器&#xff0c;结果&#xff1a; 但是这么做很麻烦&#xff0c;所以有没有更好的办法呢&#xff1f;当然有下面就开始介绍 1.打开cmd(winr,输入cmd),输入以下命令…