有这样一个需求:图片来源于数据库,一个图片列表,可上拉加载更多,已实现。问题来了,用户选中某张图片,当前图片为选中,再次点击为取消选中,两个状态通过两张icon的切换来表现。每张图片的左上角对应有两张icon小图标【选中icon/未选中icon】。请问一下,这个过程如何实现?
我的思路是:wx:if里的值要是可以跟随渲染下标index,也就是能跟随图片一起渲染,这样当触发事件时,方法里是可以得到对应下标的,就可以通过这个下标来设置对应icon的状态true/false,这样wx:if就能很好的的控制对应图片左上角的两张icon图标。但这个wx:if里的值动态生成是个问题,不知道怎么实现,望大神给思路,谢谢!
有些小伙伴说,给icon图标和对应的图片绑定一个ID,这个显然没必要,icon和图片通过渲染下标index是一一对应的。
希望得到各位的解决思路,感谢!
@軍亜~ @You can you up 感谢两位,搞了一下午,终于弄出来了,谢谢!
哎 你是没理解
军亚的方法也能实现 原理都一样 就是给每张图片一个单独的标记 标记能独立改变
上述方法可能产生很长的iconIndex,会增加渲染过程,下面的方法更好些,但是要求选中的图标能遮挡未选中的图标
逻辑:未选中的image将一直存在,将选中的index存入一个数组,然后遍历数组,如果发现index,则显示选中的image,设置其z-index高于未选中的image,将其遮挡
1,data:{
iconIndex:[]
}
2,然后点击事件中,判断index 是否在this.data.iconIndex中存在,不存在则push,存在则pop,然后setData
3,最后<block wx:for="{{iconIndex}}" wx:if="{{item==imgValueArray.index}}">
<image >//选中
</block>
<image>//未选中
实现多选也没问题
1,data:{
iconIndex:[]
}
onload时给iconIndex赋值[-1],长度为imgValueArray的长度,
2,然后点击事件中,this.data.iconIndex[index]=index,然后setdata
3,最后wx:if=“{{iconIndex[index]==index}}“,
这样甚至允许你设置默认选中其中一个,比如默认选中第一个 iconIndex:[0,-1,-1,...]
@You can you up 感谢你的解答,这样实现起来,也是同时只有一张图片能被选中,需求是,能选择多张,而且这个图片列表有多少张图片时不确定的,那么choose不可能写死的
@軍亜~ 你好 感谢你的解答,有个问题:如果这样实现,点击选择图片时,有且只有一张图片可以被选择,我的需求的,可以选择多个,也就是wx:if=“{{iconIndex==index}}”可以有多个同时成立。
首先在data中定义iconIndex,
然后通过点击事件,传入点击的index,将其绑定给data中的iconIndex,
最后写上 wx:if=“{{iconIndex==index}}” 和 wx:if=“{{iconIndex!==index}}”,就可以控制icon的切换了
[
{
src:'111.png',
choose:'true'
},
{
src:'222.png',
choose:'false'
}
]
choose自己循环进去