微信小程序开发--3.2点击按钮动画

小沐°

已于 2023-07-12 21:43:39 修改

阅读量855

点赞数

分类专栏：微信小程序文章标签：前端 html javascript

于 2023-07-12 19:47:24 首次发布

本文链接：https://blog.csdn.net/weixin_46479909/article/details/131688601

版权

微信小程序专栏收录该内容

30 篇文章 1 订阅

订阅专栏

文章展示了如何在小程序中使用colorui库来实现点击加号按钮和购物车标识的动画效果。通过WXML定义元素，WXSS设置样式，以及JavaScript处理点击事件和动画状态的切换，实现了按钮的淡入淡出以及购物车数量标签的缩放效果。

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

效果

1.点击加号按钮动画效果

2.下方购物车标识动画效果

首先导入小程序原生组件库colorui

wxml

//加号按钮
<image catchtap="addToShopCart"  aria-disabled="false" class="animation-{{item.id==clickId?'fade':''}}  basis-sm shadow" data-id="{{item.id}}" src="/static/icons-xiangle/page-serviceShop/addCart.png" style="width:36rpx;height:50rpx;">
</image>

//购物车标识
<view class="cuIcon-cu-image" style="z-index:10;position:fixed;bottom:40rpx;right:0;width:126rpx;height:auto;">
    <image src="/static/icons-xiangle/homepage/bubble-cart.png" style="width:126rpx;height:102rpx;" bindtap="toGoodShopCart"></image>
    <view class="cu-tag badge animation-{{animation}}  basis-sm shadow" style="right:10rpx;background-color:#949FE3;" aria-disabled="false">{{selectedShopAmount}}</view>
</view>

wxss

@import "/colorui/animation.wxss";

addToShopCart(e){
      console.log(e);
      var clickId=e.currentTarget.dataset.id
      var animation='scale-down'
      var that = this;
      that.setData({
        animation: animation,
        clickId:clickId
      })
      setTimeout(function() {
        that.setData({
          animation: '',
          clickId:''
        })
      }, 1000)
  },