標簽數(shù)據(jù)在data中定義从祝， 因為還要點擊高亮， 所以同時給個狀態(tài)值
data: {
selectall: [{
title: "視頻制作",
isSelect: false
}, {
title: "文創(chuàng)開發(fā)",
isSelect: false
}, {
title: "影視后期",
isSelect: false
}, {
title: "活動策劃",
isSelect: false
}, {
title: "互聯(lián)網(wǎng)營銷",
isSelect: false
}, {
title: "其他",
isSelect: false
}]
},
頁面循環(huán)渲染出來
點擊事件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;
}
樣式效果
已經(jīng)點擊的和沒有點擊的效果.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
})
},
到這兒, 高亮的就已經(jīng)寫好了. 怎么取值呢? 下面還有一個保存按鈕. 給保存按鈕一個點擊事件:
1.定義一個空數(shù)據(jù)
2.遍歷上邊的data里的selectall數(shù)組, 傳兩個參數(shù), v是所有標簽的狀態(tài)(比如isSelect:false或isSelect:true), i是下標.
- 判斷如果狀態(tài)是true , 就push到數(shù)組里
submit(){
let all = [];
this.data.selectall.forEach((v,i)=>{
console.log(v + i)
if(v.isSelect){
all.push(v)
}
})
console.log(all);
}
看打印結(jié)果
高亮的標簽狀態(tài)為true.png
