小程序点赞和取消点赞的方法

小程序点赞功能实现
本文介绍了一个小程序中点赞功能的具体实现过程,包括如何通过点击事件获取元素的ID和索引,判断点赞状态并调用相应的API进行点赞或取消点赞操作,最后更新数据视图。

设置数组某一项的值

// 点赞
    isLike(e) {
      console.log(e);
      let id = e.currentTarget.dataset.id
      let index = e.currentTarget.dataset.index
      console.log(index, this.data.list[index]);
      let list = this.data.list
      
	//  likeState=null 是未点赞    0是点赞
      if (list[index].likeState == null) {
        request('circle/addUserLike', {
          likeId: id,
          type: 0
        }).then(data => {
          wx.showToast({
            title: '点赞成功',
            icon: 'none',    //如果要纯文本,不要icon,将值设为'none'
            duration: 2000
          })
          //  先改变值,然后赋给整个对象
          list[index].likeState = 0
          this.setData({
            list: list
          })
        })
      } else if (list[index].likeState == 0) {
        request('circle/delUserLike', {
          likeId: id,
          type: 0
        }).then(data => {
          wx.showToast({
            title: '取消点赞成功',
            icon: 'none',    //如果要纯文本,不要icon,将值设为'none'
            duration: 2000
          })
          list[index].likeState = null
          this.setData({
            list: list
          })
        })
      }
    },
<think>好的,我现在需要帮助用户在微信小程序中实现取消时的图标变色功能。首先,我得回顾用户的问题,确保理解所有需求。用户希望当按钮时,图标颜色变化,并且可能有动画效果。同时,用户提到了“变色”“动画”,所以需要同时处理样式变化过渡效果。 接下来,我需要考虑微信小程序的开发框架。微信小程序使用的是WXML、WXSSJavaScript,可能还需要使用小程序的动画API。根据引用[4]中的例子,用户之前实现了五角星动画,这可能涉及到使用animation属性绑定动画数据。这里可以借鉴类似的方法。 首先,确定图标的显示状态。通常图标可能是一个空心实心的切换,比如心形图标。用户击时,图标从空心变为实心,颜色可能从灰色变为红色,并且伴随缩放或颜色渐变的动画效果。这需要用到数据绑定,控制图标的样式。 然后,考虑动画的实现方式。微信小程序提供了wx.createAnimation API,可以创建动画效果。需要定义动画的持续时间、效果(如缩放、颜色变化)等。比如,击时触发一个动画,让图标稍微放大然后缩小,同时颜色变化。不过需要注意的是,微信小程序的动画API在颜色过渡方面可能有限制,可能需要通过类名切换来实现颜色变化,而使用动画处理缩放效果。 接着,处理击事件。用户击图标时,需要切换状态,更新数据,并触发相应的动画。这涉及到在JS中维护一个变量(如isLiked),用来表示当前是否已。当用户击时,切换这个变量的值,并根据新值来改变图标的样式触发动画。 还要考虑WXML的结构。可能需要使用条件渲染或者动态类名来切换不同状态的图标。例如,使用wx:if来控制显示空心还是实心图标,或者通过class绑定不同的样式类,利用WXSS中的过渡效果实现颜色渐变。 另外,引用[2]提到某支付小程序使用了渐变色、弹性动画图标结合的方式。这可能对颜色过渡动画效果有参考价值。比如,主按钮的渐变色背景可以应用到图标的颜色变化上,而弹性动画可以用缩放效果来实现。 颜色变化的实现可能需要使用CSS的transition属性,或者通过小程序动画API来实现。不过,小程序动画API主要处理位移、旋转、缩放等,颜色变化可能需要借助类名切换,结合WXSS中的过渡效果。例如,定义两个类,.liked.unliked,分别设置不同的颜色,并在状态变化时切换类名,同时添加transition属性让颜色平滑变化。 测试时需要注意,小程序的某些CSS属性可能不支持,比如transition可能在某些版本或属性上有限制。需要查阅小程序官方文档,确认颜色过渡是否可行。如果不行,可能需要用动画API来模拟颜色变化,或者使用图片替换,通过改变图片源来实现颜色切换,但这样可能不够平滑。 综合以上考虑,可能的实现步骤是: 1. 在WXML中,使用image或view组件作为按钮,绑定击事件。 2. 在JS中定义isLiked数据,控制当前状态。 3. 使用wx.createAnimation创建动画对象,定义缩放效果。 4.击事件处理函数中,切换isLiked的值,并触发动画。 5. 在WXSS中,根据isLiked的状态切换类名,实现颜色变化,可能结合transition。 6. 如果颜色过渡无法通过CSS实现,可以考虑使用动画API的backgroundColor,但需确认支持情况。 另外,引用[4]中的例子使用了animation属性,将动画数据绑定到组件上。这可能意味着通过JS不断更新动画效果,而颜色变化可能需要结合这种方式。或者,可以分开处理:用动画处理缩放,用类名处理颜色变化。 可能遇到的问题包括颜色过渡不流畅,或者动画效果不连贯。这时候需要测试不同的方法,比如使用关键帧动画,或者将颜色变化缩放动画结合起来,通过步骤函数分阶段执行。 最后,需要确保代码结构清晰,便于维护,并且性能良好,避免过多的重复渲染或动画卡顿。</think>### 微信小程序/取消图标变色动画实现方式 #### 一、核心实现步骤 1. **数据绑定与状态管理** - 使用`data`定义`isLiked`状态控制状态: ```javascript Page({ data: { isLiked: false } }) ``` 2. **WXML结构设计** - 通过条件渲染切换图标样式,绑定击事件动画: ```html <view class="like-container" bindtap="toggleLike"> <image src="{{isLiked ? '/images/liked.png' : '/images/unliked.png'}}" class="like-icon {{isLiked ? 'active' : ''}}" animation="{{animationData}}" ></image> </view> ``` 3. **动画效果实现** - 使用`wx.createAnimation`创建弹性缩放动画: ```javascript toggleLike() { const animation = wx.createAnimation({ duration: 400, timingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' }) animation.scale(1.2).step({ duration: 200 }) animation.scale(1).step({ duration: 200 }) this.setData({ animationData: animation.export(), isLiked: !this.data.isLiked }) } ``` 4. **WXSS样式优化** - 添加颜色过渡效果(需确认微信小程序支持): ```css .like-icon { width: 40px; height: 40px; transition: color 0.3s ease; /* 部分基础库版本可能不支持 */ } .active { filter: hue-rotate(120deg) saturate(200%); /* 通过滤镜实现颜色变化 */ } ``` #### 二、备选方案(兼容性更强) 1. **双图切换+动画** ```html <view class="like-container" bindtap="toggleLike"> <image src="/images/unliked.png" class="like-icon {{isLiked ? 'hidden' : ''}}" animation="{{animationData}}" ></image> <image src="/images/liked.png" class="like-icon {{isLiked ? '' : 'hidden'}}" animation="{{animationData}}" ></image> </view> ``` 2. **通过`<text>`+IconFont实现** ```html <text class="iconfont {{isLiked ? 'liked-color' : ''}}" style="font-size: 40rpx;" animation="{{animationData}}" bindtap="toggleLike"> {{isLiked ? '❤️' : '🤍'}} </text> ``` #### 三、进阶优化建议 1. **颜色过渡替代方案** - 使用`background-image`实现渐变效果[^2] ```css .like-icon { background: linear-gradient(90deg, #ccc 0%, #ff3366 100%); -webkit-background-clip: text; color: transparent; } ``` 2. **复合动画效果** ```javascript animation.scale(1.2).rotate(15deg).step(100) animation.scale(1).rotate(-15deg).step(100) animation.scale(1).rotate(0deg).step(100) ``` 3. **性能优化** - 预加载图标资源 - 使用`transform`代替`width/height`变化 - 避免频繁的`setData`调用 ####
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小曲曲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值