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

news/2024/7/7 22:57:15

 效果

代码

 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 //获取对应的条目id
    var 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://lihuaxi.xjx100.cn/news/1601022.html

相关文章

Redis AOF重写原原理

重写aof之前 appendonly.aof.1.base.aof appendonly.aof.1.incr.aof appendonly.aof.manifest 重写aof 一次 appendonly.aof.2.base.aof 大小变化 appendonly.aof.2.incr.aof 大小o appendonly.aof.manifest 大小不变 AOF文件重写并不是对原文件进行重新整理&#xff0c;而是直…

linux单机部署kafka

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、环境准备1.jdk版本2.kafka安装包3.可视化工具 二、安装部署1.配置文件修改2.启动 结尾 前言 Kafka是一个分布式的流处理平台。kafka主要是作为一个分布式的…

串联起深度学习的整体,以及其他领域

1、从模型拟合&#xff08;收敛&#xff09;数据关系出发&#xff1a; 2、f从简单的一层和两层连接开始&#xff0c;发展&#xff1b;被表示成 3、如何判断收敛&#xff1a;,即目标函数 4、如何界定任务&#xff1a;&#xff0c;表示什么&#xff1f;表示什么&#xff1f;&a…

大屏设计器项目部署详细步骤

一.项目效果图 二.部署步骤 1.nginx配置前端配置 #gzip on;server {listen 48009;server_name analyse;location / {root /home/designer/dist;index index.html;try_files $uri

百度将在世界大会上发布AI大模型文心4.0;OpenAI考虑自主开发AI芯片

&#x1f989; AI新闻 &#x1f680; 百度将在世界大会上发布AI大模型文心4.0 摘要&#xff1a;百度将于10月17日在北京首钢园举办的百度世界大会上发布AI大模型文心4.0。据消息人士透露&#xff0c;文心4.0将是基础模型的大升级&#xff0c;核心能力将在逻辑推理、代码和数学…

爱国者的润学日记-十月

首先需要科学的准备面试和润。如何进行科学的准备工作呢&#xff1f; 高效的按照面试考察内容进行针对性训练&#xff0c;按 Machine-learning-interview准备保证处于专注的心态&#xff0c;如今互联网娱乐发达&#xff0c;之前即使比赛时我也是一边比赛一边看视频。之后准备面…

Android原生实现控件Ripple方案(API28及以上)

Android控件的水波纹效果的实现方式有很多种&#xff0c;比如使用ripple文件&#xff0c;这里介绍一下另一种Android原生的水波纹实现方案&#xff08;API28及以上&#xff09;。 我们利用RippleDrawable来实现一个带Ripple的Button。RippleDrawable可以通过xml 中定义 ripple…

leetcode 每日一题复盘(10.9~10.15)

leetcode 101 对称二叉树 这道题一开始想是用层序遍历,看每一层是否都对称,遇到一个问题就是空指针(子树为空)无法记录下来,同时会导致操作空指针的问题,因此需要修改入队条件,并用一个标志去表示空指针 vector<int>numv;for(int i0;i<size;i){TreeNode*frontque.fro…