微信小程序中的循环列表,怎么才能在点击时改变当前项的背景颜色
发布于 5 年前 作者 weiren 1036 次浏览 来自 问答

微信小程序循环出来的列表,怎么才能在点击时改变当前项的背景颜色,


改变当前选项颜色同时恢复之前被改变的颜色,保证同时只能有一个选项被改变颜色

5 回复

currentTarget

谢谢谢谢,解决了

列表项里增加一个属性data-index="{{index}}"

请问是怎么加  

<view wx:for="{{list}}">
    <view class="row" bindtap="rowTap" data-index="{{index}}">
        <view class="title">
            <text>{{item}}</text>
        </view>
    </view>
</view>
rowTap: function(e){
    console.log(e.target.dataset.index)
}

这样加没用,打印出来是undefined

1、page.data里设一个变量,比如activeItemIndex。

2、列表项里增加一个属性data-index="{{index}}"

3、在列表项的catchtap事件里page.setData({activeItemIndex: e.target.dataset.index})

4、列表项的class里根据activeItemIndex设置不同样式,如class="{{index===activeItemIndex?‘active’:’’}}"

5、wxss里定义.active样式的背景颜色。

蛮急的,希望大神帮帮忙

回到顶部