微信小程序实现 item点击变色的多种方式

1：wxs实现 多个item点击变色 并且保持之前的不变

效果图：

思路1：for循环渲染item

           给点击的元素添加active标签

           多个元素使用wxs语法判断 active标签数组中是否存在点击的index

                思路2：如果只允许同时只存在一个元素变色 就不需要使用wxs 直接把{{utility.isActive(salaryState,index)}}

改为{{state==index？'active':' '}}

思路3：如果在2的基础上 只需要短暂变色 使用微信：hover语法即可

wxml：

            期待薪资                                {{salary.dictLabel}}                  

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:

  function isActive(array,index) {   if(array.indexOf(index)>-1) {     return 'active-tag';   }else {     return '';   }  }  module.exports.isActive = isActive;

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');    },

来源地址：https://blog.csdn.net/qq_65201988/article/details/129461092