收藏
回答

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

问题模块
API和组件

微信小程序循环出来的列表,怎么才能在点击时改变当前项的背景颜色,
改变当前选项颜色同时恢复之前被改变的颜色,保证同时只能有一个选项被改变颜色

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

5 个回答

  • Tïedào
    Tïedào
    2017-04-27

    currentTarget

    2017-04-27
    赞同
    回复
  • huyuc0ng
    huyuc0ng
    2017-04-26

    列表项里增加一个属性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

    2017-04-26
    赞同
    回复
  • wills
    wills
    2017-03-01

    谢谢谢谢,解决了


    2017-03-01
    赞同
    回复
  • Tïedào
    Tïedào
    2017-02-28

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

    2017-02-28
    赞同
    回复 2
    • Meryn
      Meryn
      11-20
      您好,如果我想在这个基础上再加一个需求,就是正确的选项用绿色,之前选择的用红色,这应该如何实现,我做了两个class的三元运算,但是第一个class失效,删除第二个class后第一个正常
      11-20
      回复
    • Tïedào
      Tïedào
      星期一 21:32回复Meryn
      数据里增加checked状态属性……
      星期一 21:32
      回复
  • wills
    wills
    2017-02-28

    蛮急的,希望大神帮帮忙

    2017-02-28
    赞同
    回复