1: wxs implements multiple item clicks to change color and keeps the same as before
Renderings:
Idea 1: for loop rendering item
Add an active tag to the clicked element
Multiple elements use wxs syntax to determine whether there is a clicked index in the active label array
Idea 2: If only one element is allowed to change color at the same time, there is no need to use wxs to directly put { {utility.isActive(salaryState,index)}}
Change to { { state == index? 'active':' '}}
Idea 3: If you only need to change color temporarily on the basis of 2, use WeChat: hover syntax
wxml:
<view class="salary">
<van-row>
<van-col span="23" offset="1">期待薪资<van-icon name="arrow-down" /></van-col>
</van-row>
<van-row class="tags">
<van-col span="4" offset="{
{index%4 == 0 ? 0 : 2}}" wx:for="{
{job_salarys}}" wx:for-item="salary" wx:key="index">
<view class="tag {
{utility.isActive(salaryState,index)}}" data-key="{
{index}}" bindtap="salaryActiveType">
{
{salary.dictLabel}}
</view>
</van-col>
</van-row>
</view>
wxss:
.salary {
margin-top: 40rpx;
padding: 20rpx 40rpx;
}
.tag {
text-align: center;
width: 140rpx;
height: 60rpx;
line-height: 60rpx;
margin: 20rpx 20rpx;
font-size: 24rpx;
color: #000000;
background-color: #ffffff;
border-radius: 14rpx;
font-weight: bold;
}
.active-tag {
background-color: rgb(36, 0, 241);
}
wxs:
<!-- 工具方法 -->
<wxs module="utility">
function isActive(array,index) {
if(array.indexOf(index)>-1) {
return 'active-tag';
}else {
return '';
}
}
module.exports.isActive = isActive;
</wxs>
js:
import {getDict} from '../../../../apis/dict';
Page({
/**
* 页面的初始数据
*/
data: {
job_salarys:[],
salaryState: []
},
getDict(data) {
getDict(data).then((res)=>{
console.log(res);
let that = this;
if(res.code==200) {
that.setData({
job_salarys: res.data
})
}
})
},
salaryActiveType(e) {
let Nowstate = this.data.salaryState
let key = e.currentTarget.dataset.key
if (Nowstate.indexOf(key)>-1) {
Nowstate.splice(Nowstate.indexOf(key), 1)
}else {
Nowstate.push(key);
}
this.setData({
salaryState: Nowstate
})
console.log(this.data.salaryState);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getDict('job_salary');
},