uniapp点击效果

### 实现点击效果的方式 在 UniApp 中实现点击效果可以通过多种方式完成，具体取决于所需的效果类型。以下是几种常见的点击效果及其实现方法。 #### 1. H5直播间的点赞飘心效果 对于希望实现在H5直播间内的点赞飘心效果，可以采用如下代码片段来创建这种视觉反馈[^1]： ```html <template> <div class="container"> <!-- 点赞按钮 --> <button @click="sendHeart">❤️</button> <!-- 飘动的心形图标容器 --> <div id="heart-container"></div> </div> </template> <script> export default { methods: { sendHeart() { const container = document.getElementById('heart-container'); let heart = document.createElement('i'); heart.style.position = 'absolute'; heart.style.left = `${Math.random() * window.innerWidth}px`; heart.innerHTML = "💖"; heart.style.fontSize = `${10 + Math.random() * 20}px`; container.appendChild(heart); setTimeout(() => { heart.remove(); }, 3000); } } }; </script> <style scoped> /* 添加一些基本样式 */ .container i{ transition: all .9s ease; } #heart-container i { animation-name: floatUpAndFadeOut; animation-duration: 3s; opacity: 0; /* 结束时透明度为零 */ } @keyframes floatUpAndFadeOut { from { transform: translateY(0px); opacity: 1; } to { transform: translate(-50%, -20vh); opacity: 0; } } </style> ``` 此段代码展示了当用户点击爱心按钮后，会在随机位置生成一颗逐渐上升并淡出视野的心形图案。 #### 2. 商品加入购物车的动画效果 如果目标是在用户点击商品图标的瞬间展示其被添加到购物篮中的过程，则可以参考下面这段用于模拟物品沿弧线路径移动至底部固定区域（如购物车图标）的例子[^4]： ```javascript // 假设有一个名为 addToCart 的函数负责处理实际的商品添加逻辑， // 而 createFlyElement 则用来构建临时的小球元素以执行飞行动画。 function addProductToCart(event, productId){ // 创建一个小圆圈代表所选产品... var flyElm = this.createFlyElement(); // 设置起始坐标等于当前触摸点的位置 flyElm.style.top = event.touches ? event.touches[0].pageY : event.clientY + 'px'; flyElm.style.left = event.touches ? event.touches[0].pageX : event.clientX + 'px'; // 将新创建的对象附加给DOM树以便可见化 document.body.appendChild(flyElm); // 获取目的地坐标的计算结果 let destRect = document.querySelector('.cart-badge').getBoundingClientRect(); // 定义最终要到达的目标位置以及结束后的回调动作 animate({ duration: 600, timing(timeFraction) { return timeFraction ** 2 / (timeFraction ** 2 + (1-timeFraction)**2 || 1e-6); }, draw(progress) { if (!isNaN(destRect.width)) { flyElm.style.transform = `translate(${destRect.x-(event.touches?event.touches[0].clientX:event.clientX)}px,${destRect.y-(event.touches?event.touches[0].clientY:event.clientY)-flyElm.offsetHeight/2}px) scale(${progress}) rotateZ(${-progress*720}deg)` } else { console.error("无法获取购物车徽章尺寸"); } }, complete(){ // 移除不再需要显示的小部件实例 document.body.removeChild(flyElm); // 执行真正的业务操作——向服务器提交订单详情等 this.addToCart(productId); }.bind(this) }); } ``` 上述 JavaScript 函数实现了触碰屏幕上的某个项目之后立即启动一个带有物理弹射特性的动画序列，直到它抵达页面下方预设好的收件箱为止；与此同时触发真实的购买行为记录流程。