收藏
回答

图片的选中

问题模块
API和组件

有这样一个需求:图片来源于数据库,一个图片列表,可上拉加载更多,已实现。问题来了,用户选中某张图片,当前图片为选中,再次点击为取消选中,两个状态通过两张icon的切换来表现。每张图片的左上角对应有两张icon小图标【选中icon/未选中icon】。请问一下,这个过程如何实现?


我的思路是:wx:if里的值要是可以跟随渲染下标index,也就是能跟随图片一起渲染,这样当触发事件时,方法里是可以得到对应下标的,就可以通过这个下标来设置对应icon的状态true/false,这样wx:if就能很好的的控制对应图片左上角的两张icon图标。但这个wx:if里的值动态生成是个问题,不知道怎么实现,望大神给思路,谢谢!


有些小伙伴说,给icon图标和对应的图片绑定一个ID,这个显然没必要,icon和图片通过渲染下标index是一一对应的。

希望得到各位的解决思路,感谢!

最后一次编辑于  2017-06-26
回答关注问题邀请回答
收藏

8 个回答

  • mpview🌴 🇨🇳
    mpview🌴 🇨🇳
    2017-06-27

    @軍亜~ @You can you up 感谢两位,搞了一下午,终于弄出来了,谢谢!

    2017-06-27
    赞同
    回复
  • You can you up
    You can you up
    2017-06-27

    哎  你是没理解

    军亚的方法也能实现  原理都一样 就是给每张图片一个单独的标记  标记能独立改变

    2017-06-27
    赞同
    回复
  • 軍亜~
    軍亜~
    2017-06-27

    上述方法可能产生很长的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>//未选中



    2017-06-27
    赞同
    回复
  • 軍亜~
    軍亜~
    2017-06-27

    实现多选也没问题

    1,data:{

        iconIndex:[]

    }

    onload时给iconIndex赋值[-1],长度为imgValueArray的长度,


    2,然后点击事件中,this.data.iconIndex[index]=index,然后setdata


    3,最后wx:if=“{{iconIndex[index]==index}}“,

    这样甚至允许你设置默认选中其中一个,比如默认选中第一个  iconIndex:[0,-1,-1,...]

    2017-06-27
    赞同
    回复
  • mpview🌴 🇨🇳
    mpview🌴 🇨🇳
    2017-06-27

    @You can you up 感谢你的解答,这样实现起来,也是同时只有一张图片能被选中,需求是,能选择多张,而且这个图片列表有多少张图片时不确定的,那么choose不可能写死的

    2017-06-27
    赞同
    回复
  • mpview🌴 🇨🇳
    mpview🌴 🇨🇳
    2017-06-27

    @軍亜~ 你好 感谢你的解答,有个问题:如果这样实现,点击选择图片时,有且只有一张图片可以被选择,我的需求的,可以选择多个,也就是wx:if=“{{iconIndex==index}}”可以有多个同时成立。

    2017-06-27
    赞同
    回复
  • 軍亜~
    軍亜~
    2017-06-27

    首先在data中定义iconIndex,

    然后通过点击事件,传入点击的index,将其绑定给data中的iconIndex,

    最后写上  wx:if=“{{iconIndex==index}}” 和 wx:if=“{{iconIndex!==index}}”,就可以控制icon的切换了

    2017-06-27
    赞同
    回复
  • You can you up
    You can you up
    2017-06-27

    [

        {

        src:'111.png',

        choose:'true'

        },

        {

        src:'222.png',

        choose:'false'

        }

    ]

    choose自己循环进去

    2017-06-27
    赞同
    回复