小程序
小游戏
企业微信
微信支付
扫描小程序码分享
微信小程序循环出来的列表，怎么才能在点击时改变当前项的背景颜色，改变当前选项颜色同时恢复之前被改变的颜色，保证同时只能有一个选项被改变颜色
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
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样式的背景颜色。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
currentTarget
列表项里增加一个属性data-index="{{index}}"
请问是怎么加
<
view
wx:for
=
"{{list}}"
>
class
"row"
bindtap
"rowTap"
data-index
"{{index}}"
"title"
text
>{{item}}</
</
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样式的背景颜色。
currentTarget
请问是怎么加
<viewwx:for="{{list}}"><viewclass="row"bindtap="rowTap"data-index="{{index}}"><viewclass="title"><text>{{item}}</text></view></view></view>rowTap:function(e){console.log(e.target.dataset.index)}这样加没用，打印出来是undefined
谢谢谢谢，解决了
蛮急的，希望大神帮帮忙