1:wxs实现 多个item点击变色 并且保持之前的不变
效果图:文章来源:https://www.toymoban.com/news/detail-503826.html
文章来源地址https://www.toymoban.com/news/detail-503826.html
思路1:for循环渲染item
给点击的元素添加active标签
多个元素使用wxs语法判断 active标签数组中是否存在点击的index
思路2:如果只允许同时只存在一个元素变色 就不需要使用wxs 直接把{{utility.isActive(salaryState,index)}}
改为{{state==index?'active':' '}}
思路3:如果在2的基础上 只需要短暂变色 使用微信:hover语法即可
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');
},
到了这里,关于微信小程序实现 item点击变色的多种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!