实现点击选中的按钮变色,效果:
代码:
<view class='main' wx:for="{{objectArray}}" >
<view class="demo item{{item == checkedItem?'active':''}}" bindtap='switch' data-classify="{{item}}">{{item}}</view>
</view>
.main {
width: 100%;
padding: 20px 20px 20px 20px;
display: flex;
}
.demo{
width: 33%;
height: 60rpx;
background: #fff;
box-shadow:4px 4px 10px #ccc;
text-align: center;
border-radius: 10px;
font-size: 14px;
line-height: 60rpx;
}
/* 选中样式 */
.itemactive {
background: orange;
}
data: {
objectArray: ["按钮1", "按钮2", "按钮3"],
checkedItem: '按钮1', //默认显示
},
switch: function (e) {
var classify = e.currentTarget.dataset.classify;
console.log(classify) //点击的元素
this.setData({
checkedItem: classify //更新
})
},
OK.