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——