微信小程序---点赞(图片和点赞数更改)

index.wxml

<view class='btn_01'>
    <image src="{
  {favor_img}}" bindtap="dianzan"  wx:if="{
  {liked==1}}" mode="widthFix"></image>
    <image src="{
  {favor_img2}}" bindtap="dianzan"  wx:else mode="widthFix"></image>
    <view class='title'>{
  {liked_num}}</view>
</view>

index.js

  // 点赞
  dianzan: function (event) {
    var that = this;
    // console.log(id);
    // console.log(app.globalData.userInfo);
    // 已经授权---执行点赞
    console.log('点赞中获取number' + that.data.number);
    var liked_num = that.data.liked_num;

    // console.log("点击了同意授权");
    var that = this
    wx.request({
      url: 'https://xxxxx/video/like',
      data: {
  
  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: 可以使用Animate.css的CSS3动画实现,参考代码如下: <style> .heart { animation:heartbeat 1s ease; transform-origin:50% 50%; }@keyframes heartbeat { 0% {transform:scale(1);} 20% {transform:scale(1.2);} 40% {transform:scale(1);} 60% {transform:scale(1.2);} 80% {transform:scale(1);} 100% {transform:scale(1);} } </style><div class="heart"></div> ### 回答2: 下面是一个用300字回答的微信小程序动画的代码: 首先,在小程序的wxml文件中定义一个按钮控件来触发点动画,如下所示: ``` <button bindtap="like" class="like-button"> <image src="{{liked ? '/images/like_filled.png' : '/images/like.png'}}" class="like-icon" /> <text class="like-text">{{liked ? '已' : '点'}}</text> </button> ``` 然后,在wxss文件中定义按钮和动画效果的样式,如下所示: ```css .like-button { display: flex; align-items: center; justify-content: center; } .like-icon { width: 20px; height: 20px; margin-right: 5px; } .like-text { font-size: 14px; } @keyframes like-animation { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .like-animation { animation: like-animation 0.5s; } ``` 接下来,在小程序的js文件中定义按钮的点击事件和点动画的触发逻辑,如下所示: ```javascript Page({ data: { liked: false }, like: function() { this.setData({ liked: !this.data.liked }); if (this.data.liked) { wx.showToast({ title: '点成功', icon: 'success' }); } this.triggerAnimation(); }, triggerAnimation: function() { const animation = wx.createAnimation({ duration: 500, timingFunction: 'ease' }); this.animation = animation; this.animation.scale(1.2).step(); this.animation.scale(1).step(); this.setData({ animationData: animation.export() }); } }) ``` 最后,在小程序的json文件中添加对应的图片资源,如下所示: ```json { "navigationBarTitleText": "点动画", "usingComponents": {} } ``` 这样,当用户点击“点”按钮时,按钮会执行点动画,并且同时显示点成功的toast提示。 ### 回答3: 微信小程序的点动画代码可以使用动画组件和动画实例来实现。 首先,在页面的 wxml 文件中添加一个按钮和一个图片,用于触发点动画和显示点图片: ```html <view> <button bindtap="startAnimation">点</button> <image src="{{likeImageSrc}}" class="like-image {{likeAnimationClass}}"></image> </view> ``` 然后,在页面的 js 文件中定义点动画相关的数据和方法: ```javascript Page({ data: { likeImageSrc: "/images/like.png", // 点图片路径 likeAnimationClass: "" // 点动画的类名 }, startAnimation() { // 创建动画实例 const animation = wx.createAnimation({ duration: 1000, // 动画时长为1秒 timingFunction: "ease" // 缓动函数为匀速 }); // 以旋转动画为例 animation.scale(1.5).rotateY(360).step(); // 缩放并旋转动画 this.setData({ likeAnimationClass: "like-animation" // 添加动画类名,触发动画效果 }); setTimeout(() => { // 动画结束后,重置动画样式 this.setData({ likeAnimationClass: "" }); }, 1000); } }) ``` 添加如下 CSS 样式,用于实现点动画效果: ```css .like-animation { animation: like-animation 1s ease-in-out infinite; // 使用 CSS 动画实现点效果 } @keyframes like-animation { from { transform: scale(1) rotateY(0); // 起始动画样式 } to { transform: scale(1.5) rotateY(360deg); // 结束动画样式 } } ``` 最后,将点图片资源放在项目的 images 目录下,命名为 like.png,代码中的路径需要根据实际路径进行修改。 经过以上代码的设置,当点击点按钮时,点击的同时点动画会开始播放,点图片会缩放并旋转,1秒钟后动画结束。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值