目的:当页面存在多个标签按钮时,点击选中当前按钮时,当前按钮的背景色及字体颜色发生改变。
效果如图:
xmL部分代码如下:
<view class="optional_title">{{optional_title}}</view>
<!-- 标签部分 -->
<view class="optional_tags">
<button class="tag_btns {{state==index?'active':''}}" wx:for="{{optional}}" wx:key="index" data-id="{{index}}" bindtap="changeColor">{{item.optionalnav}}</button>
</view>
css部分代码如下:
.optional_title{
font-family: PingFang-SC-Medium;
font-size: 24rpx;
color: #696969;
line-height: 24rpx;
}
.optional_tags{
margin-top: 25rpx;
}
.tag_btns{
display: inline-block;
border: none;
outline: none;
background: #F1F1F1;
border-radius: 6rpx;
padding: 14rpx 20rpx;
font-size: 24rpx;
color: #696969;
letter-spacing: 0;
text-align: center;
line-height: 24rpx;
margin:0 18rpx 18rpx 0;
}
js部分代码如下:
// 点击标签按钮改变样式
data:{
optional_title:"可选标签",
optional:[
{
optionalnav:"套箱",
},
{
optionalnav: "拼箱",
},
{
optionalnav: "外发装箱",
},
{
optionalnav: "重箱进港",
},
{
optionalnav: "空箱",
},
{
optionalnav: "空箱业务",
},
],
state:""
},
changeColor: function (e) {
console.log('选中元素的下标', e.currentTarget.dataset.id)
console.log('选中的元素', this.data.optional[e.currentTarget.dataset.id].checked)
this.setData({
state: e.currentTarget.dataset.id,
});
},