前端小程序多选列表（自定义，切换图片状态）

直接贴代码————
我看了网上一些代码，我这个逻辑比较复杂一点——
不顾看起来应该容易通俗易懂一些——

wxml 里面用了列表循环

<block wx:for='{{arrays}}'>
      <view class='list' bindtap='tap' data-id='{{item.id}}'>
        <view class='list_left'></view>
        <view class='list_title'>{{item.demand}}</view>
        <image class='list_img02' src='{{item.src}}'></image>
      </view>
    </block>

wxss
这里面有的样式重复了，懒得删了——

.list{
  position: relative;
  width:100%;
  height:42px;
  background: #ffffff;
  margin: 1px 0 ;
}
.list_title{
  position: absolute;
  line-height: 42px;
  left: 10px;
}
.list_mess{
  position: absolute;
  left:100px;
  top:0;
  bottom:0;
  margin: auto;
  line-height: 42px;
  color: #999999;
}
.list_img{
  position: absolute;
  width:8px;
  height:13px;
  top:0;
  bottom:0;
  right:10px;
  margin: auto;
}
.list_left{
  position: absolute;
  width: 4px;
  height:30px;
  background: #999999;
  top:0;
  bottom:0;
  left:0;
  margin: auto;
}
.list_child{
  position: relative;
  width:100%;
  height:auto;
}
.list_img02{
  position: absolute;
  width:24px;
  height:24px;
  top:0;
  bottom:0;
  right:10px;
  margin: auto;
}

js 简单来说就是判定当前状态，替换当前状态
需要注意的是里面声明变量的问题
这里要注意声明变量时：this.data是否应该包含在声明变量里面————
因为this.setDate({})函数本身就代表了data里面额数据
var mysrc = this.data.arrays[id].src;
var src = ‘arrays[’ + id + ‘].src’;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    arrays: [{
      id: 0,
      demand: '主要需求001',
      src: '../../img/public/no.png',
    },
    {
      id: 1,
      demand: '主要需求002',
      src: '../../img/public/no.png',
    }
    ],
  },



myselect: function (id) {

    // 这里要注意声明变量时：this.data是否应该包含在声明变量里面，因为this.setDate({})函数本身就代表了data里面额数据
    var mysrc = this.data.arrays[id].src;
    var src = 'arrays[' + id + '].src';
    if (mysrc != "../../img/public/yes.png") {
      this.setData({
        [src]: "../../img/public/yes.png",
      })
    } else {
      this.setData({
        [src]: "../../img/public/no.png",
      });
    }
  },
  tap: function (event) {
    var id = event.currentTarget.dataset.id;
    var src = 'arrays[' + src + '].src';
    switch (id) {
      case 0:
        console.log(id);
        this.myselect(id);
        break;
      case 1:
        console.log(id);
        this.myselect(id);
        break;
      default:
        console.log("选择错误");
    }
  }
})

基本就是这个样子了——
复制粘贴，效果就出来了，但是里面的图片路径需要自己先弄个图片看一下就好——
因为右边的选择按钮，我是直接用的图片，并不是复选框——