直接贴代码————
我看了网上一些代码,我这个逻辑比较复杂一点——
不顾看起来应该容易通俗易懂一些——
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("选择错误");
}
}
})
基本就是这个样子了——
复制粘贴,效果就出来了,但是里面的图片路径需要自己先弄个图片看一下就好——
因为右边的选择按钮,我是直接用的图片,并不是复选框——