<template>
<view>
<block v-for="(item,index) in linePosArr" :key="index">
<animation :itemBox='item'></animation>
</block>
</view>
</template>
<script>
import uiFeedback from '@/utils/uifeedback'
import animation from '@/components/cartAnimationChildren/animation'
export default {
name: 'cart-animation',
components: {
animation
},
data() {
return {
linePosArr:[],//坐标列队动画坐标
}
},
methods:{
//点击商品触发的事件
touchOnGoods: function(e,busPos) {
let that = this;
console.log(e, '进入动画')
if(busPos){//是否自定义掉落坐标
this.busPos = busPos
}
var cell = {
finger:{
x: e.detail.x-10,
y: e.detail.y-10,
},//点击的位置坐标
linePos:{
x: busPos.x,
y: busPos.y,
}, //运动轨迹
xYidong:'', //运动的x坐标
yYidong:'', //运动的Y坐标
this.linePosArr.push(cell)
console.log('开始数组',this.linePosArr) // 这里打印出现的数据是子组件修改后的数据(图一)
},
}
}
</script>
子组件
<template>
<!-- 加入购物车动画 -->
<view>
<view class="good_box" :style="'transform: translateX('+items.xYidong+')'">
<view class="i-yuanquanquan" :style="'transform: translateY('+items.yYidong+')'"></view>
</view>
</view>
</template>
<script>
import uiFeedback from '@/utils/uifeedback'
export default {
props: {
itemBox: {
type: Object,
default: function() {
return { };
}
}
},
data() {
return {
items: {},
}
},
mounted(e) {
console.log('接收的值',this.itemBox)
this.items = this.itemBox;
this.start()
},
methods:{
start() {
let that = this;
console.log('赋值当前data',this.items)
this.items.xYidong = `${this.items.finger.x}px`;
this.items.yYidong = `${this.items.finger.y}px`;
},
}
}
</script>
图一
2***@qq.com (作者)
我在子组件mounted事件赋值新的字段不行嘛
mounted(e) {
console.log('接收的值',this.itemBox)
this.items = this.itemBox;
this.start()
},
2023-05-23 16:26
YUANRJ
回复 2***@qq.com: 建议了解一下js的数据类型
2023-05-23 16:37
2***@qq.com (作者)
回复 YUANRJ: 好的,谢谢
2023-05-24 06:08