网友回复
先看效果
具体教程
1、在component文件夹下新增一个组件叫cartfly.vue
<template> <view class="relative"> <view class="ball" v-for="(d,i) in balls" :key="i" :style=" d.inited ? 'transition: transform .5s ease-in; transform: translate3d(0, ' + offsetY + 'px,0); top: ' + ballY + 'px;' : '' "> <view class="inner arbg" :style="d.inited ? 'transition: transform .5s linear; transform: translate3d( ' + offsetX + 'px,0,0); left: ' + ballX + 'px; opacity: 1;' : '' "></view> </view> </view> </template> <script> export default { props:{ cartBasketRect:Object,// 购物车篮的rect信息 }, data() { return { offsetX: 0, offsetY: 0, ballX: 0, ballY: 0, balls: {}, //避免抖动 lastEvent:'', lastId:'' } }, created() { let balls = []; for (let i = 0; i < 5; i++) { balls.push({ inited: false }); } this.balls = balls }, methods:{ getBalls() { return balls; }, addToCart (e,id) { if(!id){ this.lastId = '' return } const self = this if(this.lastId == id){ e = this.lastEvent }else{ this.lastId = id this.lastEvent = e } let ballX = e.touches[0].clientX - 10 let ballY = e.touches[0].clientY - 9; this.offsetX = -Math.abs(this.cartBasketRect.left - ballX + 10) this.offsetY = Math.abs(this.cartBasketRect.top - ballY +(this.cartBasketRect.height/1.5)) this.ballX = ballX this.ballY = ballY for (let i = 0; i < 5; i++) { if (!this.balls[i].inited) { this.balls[i].inited = true setTimeout(() => { self.balls[i].inited= false }, 500); break; } } } } } </script...
点击查看剩余70%
腾讯混元模型广场里都是混元模型的垂直小模型,如何api调用?
为啥所有的照片分辨率提升工具都会修改照片上的图案细节?
js如何在浏览器中将webm视频的声音分离为单独音频?
微信小程序如何播放第三方域名url的mp4视频?
ai多模态大模型能实时识别视频中的手语为文字吗?
如何远程调试别人的chrome浏览器获取调试信息?
为啥js打开新网页window.open设置窗口宽高无效?
浏览器中js的navigator.mediaDevices.getDisplayMedia屏幕录像无法录制SpeechSynthesisUtterance产生的说话声音?
js中mediaRecorder如何录制window.speechSynthesis声音音频并下载?
python如何直接获取抖音短视频的音频文件url?