Front end applet multi selection list (custom, switch picture status)

Paste code directly————
I read some codes on the Internet. My logic is a little more complicated——
It should be easy to understand——

List loop is used in 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
Some of the patterns in it are repeated, and I don't want to delete them——

.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 is simply to determine the current state and replace the current state
It should be noted that variables are declared in
When declaring variables: should this.data be included in declaration variables————
Because this.setDate({}) function itself represents the amount data in data
var mysrc = this.data.arrays[id].src;
var src = 'arrays[' + id + '].src';

Page({

  /**
   * Initial data of the page
   */
  data: {
    arrays: [{
      id: 0,
      demand: 'Main demand 001',
      src: '../../img/public/no.png',
    },
    {
      id: 1,
      demand: 'Main demand 002',
      src: '../../img/public/no.png',
    }
    ],
  },



myselect: function (id) {

    // When declaring variables, we should pay attention to whether this.data should be included in declaration variables, because this.setDate({}) function itself represents the amount data in 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("Selection error");
    }
  }
})


It's basically like this——
Copy and paste, the effect will come out, but the path of the picture inside needs to get a picture first——
Because of the selection button on the right, I use the picture directly, not the check box——

Posted by bschmitt78 on Wed, 20 Nov 2019 13:39:33 -0800