收藏
回答

列表渲染时,只改一个元素的样式

问题模块
API和组件

列表渲染时,只改其中一个元素的样式,怎么实现?

一组图片,当点击一个的时候,这个的样式就改变,我现在要改的话是全部都改的。

最后一次编辑于  2017-12-17  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • Yang
    Yang
    2017-12-18

    方式1:条件判断(wx:if或display),符合条件时显示相对应的样式。如:

    <block wx:if="{{item.isSelected}}">

    <view class='item selected' data-index="{{index}}">{{item.name}}</view>

    </block>

    <block wx:else>

    <view class='item unchecked' data-index="{{index}}" >{{item.name}}</view>

    </block>


    方式2:方式1的变形,也就是把样式属性作为参数动态赋值,如:

    <view class='item {{item.style}}' data-index="{{index}}">{{item.name}}</view>


    方式3:通过修改data属性值,如:

    //设置当前项选中状态

    function setItemSelected(currentIndex, isSelected) {

    //获取项

    var items = this.data.items

    //遍历项

    items.forEach((item, thisIndex) => {

    if (thisIndex == currentIndex) {

    item.isSelected = isSelected

    } else {

    item.isSelected = !isSelected

    }

    });

    return items

    }


    2017-12-18
    赞同
    回复