小叶白龙博客目标需求：实现下图，给点击的view增加类，每次只能选择一个。
主要思路：给点击的view增加类，依靠点击的index对state进行赋值。如果相同时，给该view增加类。
效果演示：
wxml
<view class="iconusecont-div {{state==index?'active-tag':''}}" bindtap="select_use" wx:for="{{use}}" data-key='{{index}}'>
<view class="flex-item">
<rich-text class='use_name'>{{item.use_name}}</rich-text>
</view>
</view>
wxss
/* 用途 */
.iconusecont-div {
display: inline-block;
width: 32%;
text-align: center;
margin-top: 30rpx;
}
.flex-item {
display: inline-block;
width: 173rpx;
height: 78rpx;
font-size: 26rpx;
border: 2rpx solid #999;
text-align: center;
border-radius: 10rpx;
color: #000;
cursor: pointer;
line-height: 30rpx;
}
.use_name {
font-size: 34rpx;
line-height: 79rpx;
}
.active-tag .flex-item {
background: #03e2ff;
color: #fff;
border: 1rpx solid #fff;
}
js
Page({
data: {
use: [{
"use_name": "全部"
},
{
"use_name": "经济实惠型"
},
{
"use_name": "家用学习型"
},
{
"use_name": "豪华发烧型"
},
{
"use_name": "疯狂游戏型"
},
{
"use_name": "商务办公型"
},
{
"use_name": "经济实惠型"
},
{
"use_name": "家用学习型"
},
],
state: '',
},
//选择用途后加样式
select_use: function(e) {
this.setData({
state: e.currentTarget.dataset.key,
});
},
onReady: function() {},
})
原文作者：祈澈
作者：祈澈菇凉
链接：https://www.jianshu.com/p/0f6268cfe9a5
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
