小程序实现多个按钮点击跳转动态更换样式

 .swan页面代码：判断index与currentIndex的值是否相同，相同的话就绑定.active,不同的话就不绑定该样式

<view class="fourBtns">
        <view s-for="item,index in fourBTN" bindtap="itemClick" data-idx='{{index}}'
            class="fourBtn {{index==currentIndex?'active':''}}">
            {{fourBTN[index]}}
        </view>
        <image src="tehui.png" class="tehui"></image>
        <image src="hot.png" class="hot"></image>
    </view>

css页面代码： 

.active{
    background-image: url("../images/fourBG.png");
    background-repeat: no-repeat;
    background-size: 11vh;
    background-position:center;
    color: white;
}

.js页面代码：

Page({
       data: {
           fourBTN: ['A', 'B', 'C', 'D'],
            currentIndex: 1,
         },
        //四个按钮点击,每次点击都要设置记录的currentIndex等于当前的index
            itemClick(e) {    
                console.log("按钮 " + e.currentTarget.dataset.idx + " 被点击了！");
                this.setData({
                    currentIndex: e.currentTarget.dataset.idx
                });
                if (e.currentTarget.dataset.idx == 0) {
                    swan.navigateBack({
                        url: `../list/list`
                    });
                }
            },
        })