标签数据在data中定义， 因为还要点击高亮， 所以同时给个状态值
data: {
selectall: [{
title: "视频制作",
isSelect: false
}, {
title: "文创开发",
isSelect: false
}, {
title: "影视后期",
isSelect: false
}, {
title: "活动策划",
isSelect: false
}, {
title: "互联网营销",
isSelect: false
}, {
title: "其他",
isSelect: false
}]
},
页面循环渲染出来
点击事件bindtap='select',
绑定class: class="{{item.isSelect?'active':'select'}}", 点击的时候改变类名
自定义dataset :data-index="{{index}}"
<view>标签</view>
<view class='tagArea'>
<block wx:for="{{selectall}}" wx:key="{{this}}">
<text class="{{item.isSelect?'active':'select'}}" bindtap='select' data-index="{{index}}">{{item.title}}</text>
</block>
</view>
.tagArea{
margin-top: 40rpx;
}
.select{
display: inline-block;
line-height: 50rpx;
padding: 14rpx 26rpx;
margin: 10rpx 10rpx;
font-size: 24rpx;
background: #e6e6e6;
color: #999;
border: none;
border-radius: 16rpx;
}
.active{
display: inline-block;
background: #f44232;
color: #fff;
box-shadow: 0 5rpx 15rpx #f44232;
font-size: 24rpx;
padding: 14rpx 26rpx;
margin: 10rpx 10rpx;
border-radius: 16rpx;
line-height: 50rpx;
}
样式效果
已经点击的和没有点击的效果.png
JS部份
select(event) {
let index = event.target.dataset.index
this.data.selectall[index].isSelect = !this.data.selectall[index].isSelect;
this.setData({
selectall: this.data.selectall
})
},
到这儿, 高亮的就已经写好了. 怎么取值呢? 下面还有一个保存按钮. 给保存按钮一个点击事件:
1.定义一个空数据
2.遍历上边的data里的selectall数组, 传两个参数, v是所有标签的状态(比如isSelect:false或isSelect:true), i是下标.
- 判断如果状态是true , 就push到数组里
submit(){
let all = [];
this.data.selectall.forEach((v,i)=>{
console.log(v + i)
if(v.isSelect){
all.push(v)
}
})
console.log(all);
}
看打印结果
高亮的标签状态为true.png
