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

最新推荐文章于 2024-02-12 16:04:12 发布

更深的蓝715

最新推荐文章于 2024-02-12 16:04:12 发布

阅读量4.9k

点赞数 4

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_65201988/article/details/129461092

版权

文章介绍了在微信小程序中使用wxs实现多个item点击变色的功能，提供了三种不同的思路。第一种是通过for循环和active标签动态判断；第二种是仅允许一个元素高亮，直接通过条件判断修改样式；第三种是利用微信小程序的hover属性实现短暂变色效果。示例代码包括wxml、wxss和wxs模块的实现细节。

摘要由CSDN通过智能技术生成

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

效果图：

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