小程序点击view改变样式，view是通过wx:for循环出来的

Question

不清楚这种循环出来的，怎么点击改变样式，如果单个的话可以通过点击改变变量，改变类名，这种循环出来的怎么办呢？求大佬指教

Answer 1

首先你要明白的是，双向数据绑定下，你没有修改这个数组中需要在循环中使用到的数据，那么这个列表渲染出来就不会变化。你可以在点击的时候，用一个值去定义当前点击的是哪个，然后修改这个元素的样式

<view wx:for="{{TabList}}" wx:for-item="tab" data-tabid='{{tab.TabId}}' wx:for-index="tabindex" data-index="{{tabindex}}" class="{{tabindex == selectTab ? 'index-tab-select' : ''}}" bindtap='switchTab'>{{tab.MarketTitle}}</view>

switchTab: function (e) {
        var index = e.currentTarget.dataset.index
        var tabid = e.currentTarget.dataset.tabid
        this.setData({
            selectTab: index
        })
    }

Answer 2

将className也存储为一个数组跟随数据进行渲染，点击某一个index下的element，则去修改对应index的className，重新渲染即可。