微信小程序中的循环列表，怎么才能在点击时改变当前项的背景颜色 - WXOPEN Club

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

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

5 回复

nchang1 楼6 年前

currentTarget

leiyan2 楼6 年前

谢谢谢谢，解决了

yanliu3 楼6 年前

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

请问是怎么加

<view wx:for="{{list}}">

<view class="row" bindtap="rowTap" data-index="{{index}}">

<view class="title">

<text>{{item}}</text>

</view>

rowTap: function(e){

console.log(e.target.dataset.index)

}

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

yeping4 楼6 年前

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样式的背景颜色。

sliu5 楼5 年前

蛮急的，希望大神帮帮忙