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

 效果

代码

 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.hqwc.cn/news/130662.html

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

相关文章

什么是信创测试?信创测试工具有哪些?

信创全称是“信息技术应用创新”&#xff0c;旨在实现信息技术自主可控&#xff0c;规避外部技术制裁和风险&#xff0c;其涉及产业链包括硬件、基础软件、应用软件、云服务、数据安全等领域。 信创测试是指对信创工程项目中的产品、系统等进行测试和验证&#xff0c;以确保其…

[GXYCTF 2019]Ping Ping Ping题目解析

本题考察的内容是rce绕过&#xff0c;本事过滤的东西不算多也算是比较好绕过 基础看到这种先ping一下试试看 输入127.0.0.1看看有啥东西 有回显说明可以接着往下做 借用RCE漏洞详解及绕过总结(全面)-CSDN博客这个大佬整理的rce绕过 ;A;B无论真假&#xff0c;A与B都执行&…

125KHz低频接收唤醒芯片:Si3933(TSSOP16)

Si3933 具有内部时钟产生器&#xff0c;可使用晶体振荡器或者RC振荡器&#xff0c;也可以使用外部时钟。 Si3933 是一款三通道的D功耗ASK接 收机&#xff0c;可用于检测15KHz-150KHz低频载波频率的数字信号&#xff0c;并产生唤醒信号。内部集成的校验器用于检测 16 位或 32 位…

Go 语言切片扩容规则是扩容2倍?1.25倍?到底几倍

本次主要来聊聊关于切片的扩容是如何扩的&#xff0c;还请大佬们不吝赐教 切片&#xff0c;相信大家用了 Go 语言那么久这这种数据类型并不陌生&#xff0c;但是平日里聊到关于切片是如何扩容的&#xff0c;很多人可能会张口就来&#xff0c;切片扩容的时候&#xff0c;如果老…

Matlab论文插图绘制模板第118期—进阶气泡图

之前的文章中&#xff0c;分享过Matlab气泡图的绘制模板&#xff1a; 图虽说好看&#xff0c;但有一个缺点&#xff1a;需要手动调节两个图例的位置。 为了解决这一问题&#xff0c;我们不妨结合前段时间分享的紧凑排列多子图的绘制模板&#xff1a; 从而达到自动对齐排列的效…

springboot项目中后台文件上传处理

参考地址:http://www.gxcode.top/code 文件上次核心处理代码: @Autowired private FileUpload fileUpload; //获取资源对象:file-upload-prod.properties@ApiOperation(value = "用户头像修改", notes = "用户头像修改", httpMethod =

探索跑腿配送App的未来:技术和创新的前沿

跑腿配送App正经历着快速的技术演进&#xff0c;为提供更智能、高效和个性化的服务而不断创新。本文将探讨其中一个可能的创新方向&#xff1a;使用机器学习和实时数据分析来改进配送路线&#xff0c;提高效率&#xff0c;并为用户提供更好的体验。 技术背景 要实现这个创新…

代码随想录算法训练营第四十九天 | 139.单词拆分、关于多重背包,你该了解这些!

139.单词拆分 视频讲解&#xff1a;动态规划之完全背包&#xff0c;你的背包如何装满&#xff1f;| LeetCode&#xff1a;139.单词拆分_哔哩哔哩_bilibili 代码随想录 &#xff08;1&#xff09;代码 关于多重背包&#xff0c;你该了解这些&#xff01; 链接&#xff1a; 代码…

2023年标普、穆迪和惠誉评级方法研究报告

第一章 概述 近几年&#xff0c;中国的违约债券事件频发&#xff0c;尤其是涉及母子公司的违约事件。当母公司或子公司中的任何一方出现违约&#xff0c;往往会对另一方产生显著的负面效应。为了更精准地评估这种关联性&#xff0c;深入研究国际三大信用评级机构——标普、穆迪…

Linux TCP 通信并发

多进程 客户端 #include <stdio.h> #include <arpa/inet.h> #include <unistd.h> #include <string.h> #include <stdlib.h> int main() {//创建套接字int lfd socket(AF_INET, SOCK_STREAM, 0);if(lfd -1) {perror("socket");exi…

基于BES平台音乐信号处理之DRC算法实现

基于BES平台音乐信号处理之DRC算法实现 是否需要申请加入数字音频系统研究开发交流答疑群(课题组)&#xff1f;加我微信hezkz17, 本群提供音频技术答疑服务 1 DRC实现 drc.h 2 调用 audio_process.c 3 DRC动态范围控制算法在音乐信号处理中的位置 4 DRC具体细节源码 可参考…

【单片机】17-温度传感器DS18B20

1.DS18B20相关背景知识 1.温度传感器 &#xff08;1&#xff09;测温度的方式&#xff1a;物理&#xff08;汞柱&#xff0c;气压&#xff09;&#xff0c;电子&#xff08;金属电性能随温度变化&#xff09; &#xff08;2&#xff09;早期&#xff1a;热敏电阻&#xff08;模…