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

 效果

代码

 wxml

  
    
      {{item.num_name}}
    
  

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
    })
  },
})