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

这篇具有很好参考价值的文章主要介绍了微信小程序实现 item点击变色的多种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

效果图:

微信小程序实现 item点击变色的多种方式文章来源地址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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序—点击实现页面跳转

    1.按钮button标签通过bindtap属性绑定点击事件实现页面跳转。 2.但需注意,跳转到tabBar页面和非tabBar页面所调用的函数方法不一样。 跳转到TabBar页面需用wx.switchTab()方法 3.而 跳转到非tabBar页面用wx.navigateTo()方法

    2024年02月11日
    浏览(59)
  • 微信小程序实用工具——渐变色按钮(二)

    今年的国美毕业展已经开始了🧑‍🎨🧑‍🎨在杭州的小伙伴可以快速出击了🏃‍♂️🏃‍♂️ 这里我想推荐其中的一副版画作品《突围》 在众多版画系作品中被它所吸引 🌻🌻🌻🌼🌼🌼🌺🌺🌺🌼🌼🌼🌻🌻🌻 🎃 内容介绍: 👉这次给大家带来六个我见到比较喜

    2024年02月08日
    浏览(52)
  • 微信小程序实用工具——渐变色按钮(一)

    2023五月天演唱会🎤🎤🎤大家一起冲冲冲🏃‍♂️🏃‍♂️🏃‍♂️ 🌻🌻🌻🌼🌼🌼🌺🌺🌺🌼🌼🌼🌻🌻🌻 🎃 内容介绍: 👉这次给大家带来六个我见到比较喜欢的按钮样式,接下来我将逐一介绍这六个按钮的样式和代码 📋 整体展示: 🌻🌻🌻🌼🌼🌼🌺🌺🌺

    2024年02月08日
    浏览(79)
  • 微信小程序实现滑动/点击切换Tab

    👏 swiper+scroll-view实现滑动/点击切换Tab,以及scroll-left的使用~ 🥇文末分享源代码。记得点赞+关注+收藏! 2.1 scroll-view实现tab列表 scroll-view: 可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px。 scroll-x(bool

    2024年01月19日
    浏览(111)
  • 微信小程序点击icon实现分享功能

    1.小程序分享功能实现方式 小程序分享功能有两种方式,监听用户点击页面内转发按钮( 组件 open-type=“share”)或右上角菜单“转发”按钮的行为,并自定义转发内容。 使用微信小程序的分享功能需要定义onShareAppMessage(Object object)函数,存在该函数分享功能才能被触发 官网

    2024年02月10日
    浏览(66)
  • 微信小程序实现点击按钮跳转页面

    微信小程序中点击按钮跳转页面可以使用 wx.navigateTo 或 wx.redirectTo 方法。 首先,在按钮的绑定事件中调用方法,如: 然后,在页面的 js 文件中实现跳转逻辑,如: 注意,需要在项目的 app.json 文件中注册新页面,才能在小程序中使用。 使用 wx.navigateTo 方法会在当前页面下方

    2024年02月15日
    浏览(58)
  • 微信小程序 - 实现点击按钮退出小程序的解决方案

    在微信小程序开发中,有时候我们需要在小程序中提供一个按钮,使用户能够方便地退出小程序。本篇文章将介绍一种简单的解决方案,通过点击按钮来实现退出小程序的功能。 首先,我们需要在小程序的页面中添加一个按钮,用户可以点击该按钮来退出小程序。在小程序的

    2024年01月22日
    浏览(47)
  • 微信小程序:点击按钮实现数据加载(带模糊查询)

    wxml: 增加按钮 button class=\\\"last\\\" bindtap=\\\"bindMore\\\" wx:if=\\\"{{!allDataLoaded}}\\\"点击获取更多/button js: wxss: 后端thinkphp:

    2024年02月14日
    浏览(41)
  • 微信小程序实现简单的点击切换功能(微信开发者工具)

    📚文章目录 🔗首先创建一个简单的切换按钮📋 如图下  📋wxml代码  📋wxss代码 🔗但是这个元素是无法点击的,所以要添加一个点击事件到这两个元素里面  📋js代码(在page({})里面添加) 📋wxml代码  🔗class使用三元表达式来继续点击判断  🔗使用bindtap绑定事件  事件的

    2024年02月09日
    浏览(183)
  • [微信小程序]在图片上的特定区域点击实现功能

    目录 一、功能描述 二、两种不同的解决方法 1.方法一:image组件和view组件相结合 2.方法二:获取点击事件的位置信息   对于前端初学者,在前端设计尤其是地图功能设计过程中,偶尔会碰到下面这个问题:实现在图片上特定区域内的点击进行跳转或其它功能。对于这个问题,

    2024年02月02日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包