Mini Program clicks view to change the style. View is looped out through wx:for.

it is not clear how to click to change the style when this cycle comes out. If a single person can click to change the variable and change the class name, what about this cycle? Ask the boss for advice


the first thing you need to understand is that under two-way data binding, you do not modify the data that needs to be used in the loop in this array, so the list will not change when rendered. When you click, you can use a value to define which one is currently clicked, and then modify the style of the element

<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
        })
    }

Save className as an array of follow data for rendering. Click element under a index , then modify the className corresponding to index , and render again.

Menu