@dolphinweex/weex-harmony 0.1.31 → 0.1.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
<template>
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
2
|
+
<!-- <BaseSameLayer
|
3
|
+
:hosSameLayerArgs="hosSameLayerArgs"
|
4
|
+
embedType="native/web"
|
5
|
+
:defaultWidth="300"
|
6
|
+
:defaultHeight="120"
|
7
|
+
></BaseSameLayer> -->
|
8
|
+
<iframe :src="src" ref="iframe"></iframe>
|
9
9
|
|
10
10
|
</template>
|
11
11
|
|
@@ -14,100 +14,100 @@ import BaseSameLayer from "./baseSameLayer.vue";
|
|
14
14
|
let count = 0
|
15
15
|
|
16
16
|
export default {
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
},
|
30
|
-
},
|
31
|
-
src: {
|
32
|
-
type: String,
|
33
|
-
required: true,
|
17
|
+
name: "HlWeb",
|
18
|
+
data() {
|
19
|
+
return {
|
20
|
+
width: 0,
|
21
|
+
height: 0
|
22
|
+
}
|
23
|
+
},
|
24
|
+
props: {
|
25
|
+
hosUniqueProps: {
|
26
|
+
type: Object,
|
27
|
+
default() {
|
28
|
+
return {};
|
34
29
|
},
|
35
|
-
harmonyStyle: {
|
36
|
-
type: Object,
|
37
|
-
required: false,
|
38
|
-
}
|
39
30
|
},
|
31
|
+
src: {
|
32
|
+
type: String,
|
33
|
+
required: true,
|
34
|
+
},
|
35
|
+
harmonyStyle: {
|
36
|
+
type: Object,
|
37
|
+
required: false,
|
38
|
+
}
|
39
|
+
},
|
40
40
|
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
}
|
41
|
+
computed: {
|
42
|
+
hosSameLayerArgs() {
|
43
|
+
return {
|
44
|
+
...this.hosUniqueProps, // 鸿蒙原生组件独有属性
|
45
|
+
src: this.src,
|
46
|
+
width: this.width,
|
47
|
+
height: (this.harmonyStyle && this.harmonyStyle.height) ? this.harmonyStyle.height : this.height,
|
48
|
+
pagefinish: this.onPageFinish,
|
49
|
+
pagestart: this.onPageStart,
|
50
|
+
error: this.onError,
|
51
|
+
receivedtitle: this.onReceivedTitle,
|
52
|
+
message: this.onMessage,
|
54
53
|
}
|
55
|
-
}
|
56
|
-
|
57
|
-
|
58
|
-
|
54
|
+
}
|
55
|
+
},
|
56
|
+
mounted() {
|
57
|
+
this.width = this.$el.clientWidth;
|
58
|
+
this.height = this.$el.clientHeight;
|
59
59
|
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
60
|
+
this.onPageStart();
|
61
|
+
var that = this
|
62
|
+
window.addEventListener('message', function (event) {
|
63
|
+
// 可以添加来源检查以确保消息来自预期的源
|
64
|
+
if (event.origin === window.origin && that.onMessage) {
|
65
|
+
that.onMessage(event.data)
|
66
|
+
}
|
67
|
+
});
|
68
68
|
|
69
|
-
|
69
|
+
this.$refs["iframe"].addEventListener('load', this.onPageFinish);
|
70
70
|
|
71
|
-
|
71
|
+
this.$refs["error"].addEventListener('load', this.onError);
|
72
|
+
},
|
73
|
+
methods: {
|
74
|
+
postMessage(message){
|
75
|
+
const iframe = this.$refs["iframe"]
|
76
|
+
const target = new URL(iframe.src).origin
|
77
|
+
iframe.contentWindow.postMessage(message, target)
|
78
|
+
//this.$refs["iframe"].contentWindow.postMessage(message, this.src)
|
72
79
|
},
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
iframe.contentWindow.postMessage(
|
78
|
-
|
79
|
-
},
|
80
|
-
// 自定义拓展其它逻辑
|
81
|
-
onPageFinish(res) {
|
82
|
-
console.log("[web] pagefinish ", res);
|
83
|
-
this.$refs["iframe"].contentWindow.$midea_harmony_native = window.$midea_harmony_native
|
84
|
-
this.$refs["iframe"].contentWindow.postMessage(JSON.stringify(window.$midea_harmony_native), '*');
|
85
|
-
this.$emit("pagefinish", res);
|
86
|
-
},
|
87
|
-
onPageStart(res) {
|
88
|
-
console.log("[web] pagestart ", res);
|
89
|
-
this.$emit("pagestart", res);
|
90
|
-
},
|
91
|
-
onError(res) {
|
92
|
-
console.log("[web] onError ", res);
|
93
|
-
this.$emit("error", res);
|
94
|
-
},
|
95
|
-
onReceivedTitle(res) {
|
96
|
-
console.log("[web] onReceivedTitle ", res);
|
97
|
-
this.$emit("receivedtitle", res);
|
98
|
-
},
|
99
|
-
onMessage(res){
|
100
|
-
console.log("[web] onMessage ", res);
|
101
|
-
this.$emit("message", res);
|
102
|
-
},
|
80
|
+
// 自定义拓展其它逻辑
|
81
|
+
onPageFinish(res) {
|
82
|
+
console.log("[web] pagefinish ", res);
|
83
|
+
this.$refs["iframe"].contentWindow.$midea_harmony_native = window.$midea_harmony_native
|
84
|
+
this.$refs["iframe"].contentWindow.postMessage(JSON.stringify(window.$midea_harmony_native), '*');
|
85
|
+
this.$emit("pagefinish", res);
|
103
86
|
},
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
87
|
+
onPageStart(res) {
|
88
|
+
console.log("[web] pagestart ", res);
|
89
|
+
this.$emit("pagestart", res);
|
90
|
+
},
|
91
|
+
onError(res) {
|
92
|
+
console.log("[web] onError ", res);
|
93
|
+
this.$emit("error", res);
|
94
|
+
},
|
95
|
+
onReceivedTitle(res) {
|
96
|
+
console.log("[web] onReceivedTitle ", res);
|
97
|
+
this.$emit("receivedtitle", res);
|
98
|
+
},
|
99
|
+
onMessage(res){
|
100
|
+
console.log("[web] onMessage ", res);
|
101
|
+
this.$emit("message", res);
|
102
|
+
},
|
103
|
+
},
|
104
|
+
watch: {
|
105
|
+
loading(newText, oldText) {
|
106
|
+
if (newText !== oldText) {
|
107
|
+
this.scheduleTransfer(); // 当loading属性变化时重新调用
|
108
|
+
}
|
110
109
|
},
|
110
|
+
},
|
111
111
|
};
|
112
112
|
</script>
|
113
113
|
|
@@ -122,9 +122,7 @@
|
|
122
122
|
<div class="flexBox">
|
123
123
|
<img
|
124
124
|
:src="data.list[draggingIndex].iconImage.url"
|
125
|
-
:style="
|
126
|
-
applyNormalAttribute(data.list[draggingIndex].iconImage)
|
127
|
-
"
|
125
|
+
:style="applyNormalAttribute(data.list[draggingIndex].iconImage)"
|
128
126
|
/>
|
129
127
|
<div @click.stop.prevent>
|
130
128
|
<img
|
@@ -134,9 +132,7 @@
|
|
134
132
|
? data.list[draggingIndex].selectIcon.selectedUrl
|
135
133
|
: data.list[draggingIndex].selectIcon.url
|
136
134
|
"
|
137
|
-
:style="
|
138
|
-
applyNormalAttribute(data.list[draggingIndex].selectIcon)
|
139
|
-
"
|
135
|
+
:style="applyNormalAttribute(data.list[draggingIndex].selectIcon)"
|
140
136
|
/>
|
141
137
|
</div>
|
142
138
|
</div>
|
@@ -152,7 +148,6 @@
|
|
152
148
|
</template>
|
153
149
|
|
154
150
|
<script>
|
155
|
-
import { weex_harmony_rebindGestureDelayed } from '@dolphinweex/harmony-webpack-adapter/registerGesture.js'; // 请替换为实际的loader文件路径
|
156
151
|
import lottie from 'lottie-web';
|
157
152
|
const scla = 2;
|
158
153
|
export default {
|
@@ -172,6 +167,7 @@ export default {
|
|
172
167
|
},
|
173
168
|
data() {
|
174
169
|
return {
|
170
|
+
isNotUpdated: true,
|
175
171
|
targetTouchX: 0,
|
176
172
|
targetTouchY: 0,
|
177
173
|
selected: null,
|
@@ -199,10 +195,6 @@ export default {
|
|
199
195
|
fixedItemHeight: 0,
|
200
196
|
animationFrameId: null,
|
201
197
|
isProcessingData: false,
|
202
|
-
// 手势事件配置 - 根据实际使用的手势事件来配置
|
203
|
-
gestureEventMap: [],
|
204
|
-
// 元素ID - 用于标识需要绑定手势的元素
|
205
|
-
elementId: 'grid-item'
|
206
198
|
};
|
207
199
|
},
|
208
200
|
computed: {
|
@@ -210,7 +202,9 @@ export default {
|
|
210
202
|
return {
|
211
203
|
'--grid-cols': this.data.spanCount || this.cols,
|
212
204
|
'--grid-gap': `${this.data.spaceSize || 8}px`,
|
213
|
-
'--grid-margin': `${
|
205
|
+
'--grid-margin': `${
|
206
|
+
this.data.layoutConfig.marginStart + this.data.layoutConfig.marginEnd
|
207
|
+
}px`,
|
214
208
|
marginTop: this.data.layoutConfig.marginTop * scla,
|
215
209
|
marginBottom: this.data.layoutConfig.marginBottom * scla,
|
216
210
|
marginLeft: this.data.layoutConfig.marginStart * scla,
|
@@ -222,7 +216,6 @@ export default {
|
|
222
216
|
if (this.draggingIndex === null) {
|
223
217
|
return { display: 'none' };
|
224
218
|
}
|
225
|
-
|
226
219
|
const item = this.data.list[this.draggingIndex];
|
227
220
|
let itemView = {};
|
228
221
|
if (item) {
|
@@ -248,103 +241,50 @@ export default {
|
|
248
241
|
updateListItem(data) {
|
249
242
|
console.log('updateListItem收到数据:', JSON.stringify(data));
|
250
243
|
const id = data.itemView.id;
|
251
|
-
const index = this.data.list.findIndex(
|
252
|
-
(item) => item.itemView.id == id
|
253
|
-
);
|
244
|
+
const index = this.data.list.findIndex((item) => item.itemView.id == id);
|
254
245
|
|
255
246
|
if (index === -1) {
|
256
247
|
return;
|
257
248
|
}
|
258
249
|
|
259
|
-
// 检查是否有动画URL的变化
|
260
|
-
const oldBgAnimUrl = this.data.list[index].bgAnimView.animUrl || '';
|
261
|
-
const oldLoadingAnimUrl = this.data.list[index].loadingAnimView.animUrl || '';
|
262
|
-
const oldFrontAnimUrl = this.data.list[index].frontAnimView.animUrl || '';
|
263
|
-
const newBgAnimUrl = data.bgAnimView.animUrl || '';
|
264
|
-
const newLoadingAnimUrl = data.loadingAnimView.animUrl || '';
|
265
|
-
const newFrontAnimUrl = data.frontAnimView.animUrl || '';
|
266
|
-
|
267
250
|
// 合并全局数据到新数据
|
268
251
|
const mergedData = this.mergeItemData(data);
|
269
|
-
|
270
|
-
// 更新数据
|
271
|
-
this.$set(this.data.list, index, mergedData);
|
272
252
|
|
253
|
+
this.$set(this.data.list, index, mergedData);
|
273
254
|
this.$nextTick(() => {
|
274
255
|
const itemId = String(data.itemView.id);
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
256
|
+
if (mergedData.bgAnimView.animUrl) {
|
257
|
+
this.createLottieAnimation(
|
258
|
+
'bg',
|
259
|
+
itemId,
|
260
|
+
mergedData.bgAnimView,
|
261
|
+
mergedData
|
262
|
+
);
|
279
263
|
}
|
280
264
|
|
281
|
-
|
282
|
-
|
283
|
-
|
265
|
+
if (mergedData.loadingAnimView.animUrl) {
|
266
|
+
this.createLottieAnimation(
|
267
|
+
'loading',
|
268
|
+
itemId,
|
269
|
+
mergedData.loadingAnimView,
|
270
|
+
mergedData
|
271
|
+
);
|
284
272
|
}
|
285
273
|
|
286
|
-
|
287
|
-
|
288
|
-
|
274
|
+
if (mergedData.frontAnimView.animUrl) {
|
275
|
+
this.createLottieAnimation(
|
276
|
+
'front',
|
277
|
+
itemId,
|
278
|
+
mergedData.frontAnimView,
|
279
|
+
mergedData
|
280
|
+
);
|
289
281
|
}
|
290
|
-
// 重新绑定手势事件 - 解决DOM更新后手势失效问题
|
291
|
-
this.rebindGestureEvents();
|
292
282
|
});
|
293
283
|
},
|
294
|
-
// 重新绑定手势事件的方法
|
295
|
-
rebindGestureEvents() {
|
296
|
-
try {
|
297
|
-
// 延迟执行确保DOM完全更新
|
298
|
-
weex_harmony_rebindGestureDelayed(
|
299
|
-
this.$el, // 组件根元素
|
300
|
-
this.gestureEventMap, // 手势事件配置数组
|
301
|
-
this.elementId, // 元素类名ID
|
302
|
-
100 // 延迟100ms
|
303
|
-
);
|
304
|
-
console.log('手势事件重新绑定完成');
|
305
|
-
} catch (error) {
|
306
|
-
console.error('重新绑定手势事件失败:', error);
|
307
|
-
}
|
308
|
-
},
|
309
|
-
// 初始化手势事件配置
|
310
|
-
initGestureConfig() {
|
311
|
-
// 根据你实际使用的手势事件来配置
|
312
|
-
this.gestureEventMap = [
|
313
|
-
{
|
314
|
-
name: "@touchstart",
|
315
|
-
handler: this.startLongPress,
|
316
|
-
params: ['event', 'index'],
|
317
|
-
isEvent: true,
|
318
|
-
modifier: []
|
319
|
-
},
|
320
|
-
{
|
321
|
-
name: "@touchmove",
|
322
|
-
handler: this.checkLongPressMove,
|
323
|
-
params: [],
|
324
|
-
isEvent: true,
|
325
|
-
modifier: []
|
326
|
-
},
|
327
|
-
{
|
328
|
-
name: "@touchend",
|
329
|
-
handler: this.endTouch,
|
330
|
-
params: [],
|
331
|
-
isEvent: true,
|
332
|
-
modifier: []
|
333
|
-
},
|
334
|
-
{
|
335
|
-
name: "@touchcancel",
|
336
|
-
handler: this.endTouch,
|
337
|
-
params: [],
|
338
|
-
isEvent: true,
|
339
|
-
modifier: []
|
340
|
-
}
|
341
|
-
];
|
342
|
-
},
|
343
|
-
// 简化的动画创建方法
|
344
284
|
createLottieAnimation(type, itemId, animView, itemData) {
|
345
285
|
const animKey = `${type}-${itemId}`;
|
346
286
|
const refName = `${type}Anim-${itemId}`;
|
347
|
-
|
287
|
+
|
348
288
|
// 销毁旧动画
|
349
289
|
if (this.lottieAnimations[animKey]) {
|
350
290
|
this.lottieAnimations[animKey].destroy();
|
@@ -358,7 +298,10 @@ export default {
|
|
358
298
|
}
|
359
299
|
|
360
300
|
// 检查可见性
|
361
|
-
if (
|
301
|
+
if (
|
302
|
+
typeof animView.visibility === 'number' &&
|
303
|
+
animView.visibility === 0
|
304
|
+
) {
|
362
305
|
return;
|
363
306
|
}
|
364
307
|
|
@@ -384,11 +327,17 @@ export default {
|
|
384
327
|
if (this.lottieAnimations[animKey] === anim) {
|
385
328
|
anim.destroy();
|
386
329
|
delete this.lottieAnimations[animKey];
|
387
|
-
|
330
|
+
|
388
331
|
// 清空对应的animUrl数据
|
389
|
-
const index = this.data.list.findIndex(
|
332
|
+
const index = this.data.list.findIndex(
|
333
|
+
(i) => i.itemView.id == itemId
|
334
|
+
);
|
390
335
|
if (index !== -1) {
|
391
|
-
this.$set(
|
336
|
+
this.$set(
|
337
|
+
this.data.list[index][`${type}AnimView`],
|
338
|
+
'animUrl',
|
339
|
+
''
|
340
|
+
);
|
392
341
|
}
|
393
342
|
}
|
394
343
|
});
|
@@ -422,11 +371,11 @@ export default {
|
|
422
371
|
return selectedIds;
|
423
372
|
},
|
424
373
|
selectIconClick(e, item, index) {
|
425
|
-
e.preventDefault();
|
426
|
-
e.stopPropagation();
|
427
374
|
if (item.selectIcon.visibility) {
|
428
375
|
item.itemView.isSelected = !item.itemView.isSelected;
|
429
376
|
}
|
377
|
+
e.preventDefault();
|
378
|
+
e.stopPropagation();
|
430
379
|
const target = {
|
431
380
|
...item.itemView,
|
432
381
|
id: String(item.itemView.id),
|
@@ -439,19 +388,16 @@ export default {
|
|
439
388
|
},
|
440
389
|
|
441
390
|
itemViewClick(e, item, index) {
|
442
|
-
if (e.defaultPrevented) {
|
443
|
-
return;
|
444
|
-
}
|
445
|
-
|
446
391
|
console.log('itemViewClick');
|
447
|
-
// 确保取消任何长按计时器
|
448
|
-
this.cancelLongPress();
|
449
392
|
if (this.data.isEditing) {
|
450
393
|
if (item.selectIcon.visibility) {
|
451
394
|
item.itemView.isSelected = !item.itemView.isSelected;
|
452
395
|
}
|
453
|
-
return;
|
454
396
|
}
|
397
|
+
|
398
|
+
// 确保取消任何长按计时器
|
399
|
+
this.cancelLongPress();
|
400
|
+
|
455
401
|
e.preventDefault();
|
456
402
|
e.stopPropagation();
|
457
403
|
const target = {
|
@@ -461,6 +407,7 @@ export default {
|
|
461
407
|
...e,
|
462
408
|
};
|
463
409
|
this.$emit('onClickItem', target);
|
410
|
+
this.$emit('onSelectItems', target);
|
464
411
|
},
|
465
412
|
|
466
413
|
actionClick(e, item, index) {
|
@@ -571,7 +518,7 @@ export default {
|
|
571
518
|
'bgAnimView',
|
572
519
|
'frontAnimView',
|
573
520
|
];
|
574
|
-
|
521
|
+
|
575
522
|
types.forEach((type) => {
|
576
523
|
// 使用mergeDate合并全局数据和项目数据
|
577
524
|
processedItem[type] = this.mergeDate(item[type] || {}, type);
|
@@ -648,7 +595,7 @@ export default {
|
|
648
595
|
return;
|
649
596
|
}
|
650
597
|
this.$emit('onDragEventStart', e);
|
651
|
-
|
598
|
+
|
652
599
|
// 只在编辑模式下阻止事件冒泡和默认行为
|
653
600
|
this.cancelLongPress();
|
654
601
|
// 记录起始触摸位置和索引
|
@@ -670,6 +617,9 @@ export default {
|
|
670
617
|
|
671
618
|
// 检查长按过程中的移动
|
672
619
|
checkLongPressMove(e) {
|
620
|
+
if (this.data.isEditing) {
|
621
|
+
e.oriEvent.stopImmediatePropagation();
|
622
|
+
}
|
673
623
|
if (!this.data.isEditable) {
|
674
624
|
return;
|
675
625
|
}
|
@@ -679,14 +629,11 @@ export default {
|
|
679
629
|
const moveY = Math.abs(touch.pageY - this.touchStartY);
|
680
630
|
|
681
631
|
// 如果水平移动大于垂直移动,则阻止事件传播
|
682
|
-
if (moveX > moveY
|
632
|
+
if (moveX > moveY && !this.isTouchDragging && this.data.isEditing) {
|
683
633
|
if (e.oriEvent) {
|
684
634
|
e.oriEvent.preventDefault();
|
685
635
|
e.oriEvent.stopPropagation();
|
686
636
|
e.oriEvent.stopImmediatePropagation();
|
687
|
-
e.preventDefault && e.preventDefault();
|
688
|
-
e.stopPropagation && e.stopPropagation();
|
689
|
-
e.stopImmediatePropagation && e.stopImmediatePropagation();
|
690
637
|
}
|
691
638
|
}
|
692
639
|
|
@@ -717,38 +664,37 @@ export default {
|
|
717
664
|
console.log('长按触发,进入编辑模式');
|
718
665
|
// 进入编辑模式
|
719
666
|
|
720
|
-
if(this.data.isEditing){
|
721
|
-
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
726
|
-
|
727
|
-
|
728
|
-
|
729
|
-
|
730
|
-
|
731
|
-
|
732
|
-
|
733
|
-
|
734
|
-
|
735
|
-
|
736
|
-
|
737
|
-
|
738
|
-
|
739
|
-
|
740
|
-
|
741
|
-
|
742
|
-
|
743
|
-
|
744
|
-
|
745
|
-
|
746
|
-
|
747
|
-
|
748
|
-
});
|
667
|
+
if (this.data.isEditing) {
|
668
|
+
// 设置当前拖拽索引
|
669
|
+
this.draggingIndex = index;
|
670
|
+
this.isTouchDragging = true;
|
671
|
+
|
672
|
+
// 使用存储的固定宽高
|
673
|
+
this.draggedItemRect = {
|
674
|
+
width: this.fixedItemWidth,
|
675
|
+
height: this.fixedItemHeight,
|
676
|
+
};
|
677
|
+
|
678
|
+
// 获取当前元素位置用于计算偏移
|
679
|
+
const element = document.querySelectorAll('.grid-item')[index];
|
680
|
+
if (element) {
|
681
|
+
const rect = element.getBoundingClientRect();
|
682
|
+
// 计算触摸点相对于元素左上角的偏移
|
683
|
+
this.touchOffsetX = this.touchStartX - rect.left;
|
684
|
+
this.touchOffsetY = this.touchStartY - rect.top;
|
685
|
+
|
686
|
+
// 设置克隆元素的初始位置
|
687
|
+
this.dragCloneX = rect.left;
|
688
|
+
this.dragCloneY = rect.top;
|
689
|
+
this.isDragClone = true;
|
690
|
+
|
691
|
+
requestAnimationFrame(() => {
|
692
|
+
this.dragCloneX = this.touchStartX - this.touchOffsetX;
|
693
|
+
this.dragCloneY = this.touchStartY - this.touchOffsetY;
|
694
|
+
});
|
749
695
|
|
750
|
-
|
751
|
-
|
696
|
+
console.log('拖拽克隆已创建');
|
697
|
+
}
|
752
698
|
}
|
753
699
|
this.data.isEditing = true;
|
754
700
|
this.$emit('onEditStateChanged', true);
|
@@ -775,9 +721,6 @@ export default {
|
|
775
721
|
e.oriEvent.stopPropagation();
|
776
722
|
e.oriEvent.stopImmediatePropagation();
|
777
723
|
}
|
778
|
-
e.preventDefault && e.preventDefault();
|
779
|
-
e.stopPropagation && e.stopPropagation();
|
780
|
-
e.stopImmediatePropagation && e.stopImmediatePropagation();
|
781
724
|
}
|
782
725
|
|
783
726
|
const touch = e.changedTouches[0];
|
@@ -811,7 +754,7 @@ export default {
|
|
811
754
|
if (itemIndex === this.draggingIndex) continue;
|
812
755
|
|
813
756
|
const rect = item.getBoundingClientRect();
|
814
|
-
|
757
|
+
|
815
758
|
// 触摸点是否在元素的中心区域内
|
816
759
|
const centerX = (rect.left + rect.right) / 2;
|
817
760
|
const centerY = (rect.top + rect.bottom) / 2;
|
@@ -835,10 +778,7 @@ export default {
|
|
835
778
|
|
836
779
|
// 执行交换
|
837
780
|
if (targetIndex !== null && targetIndex !== this.draggingIndex) {
|
838
|
-
[
|
839
|
-
this.data.list[this.draggingIndex],
|
840
|
-
this.data.list[targetIndex],
|
841
|
-
] = [
|
781
|
+
[this.data.list[this.draggingIndex], this.data.list[targetIndex]] = [
|
842
782
|
this.data.list[targetIndex],
|
843
783
|
this.data.list[this.draggingIndex],
|
844
784
|
];
|
@@ -947,10 +887,7 @@ export default {
|
|
947
887
|
// 重置动画实例对象
|
948
888
|
this.lottieAnimations = {};
|
949
889
|
|
950
|
-
console.log(
|
951
|
-
'开始初始化Lottie动画,列表项数量:',
|
952
|
-
this.data.list.length
|
953
|
-
);
|
890
|
+
console.log('开始初始化Lottie动画,列表项数量:', this.data.list.length);
|
954
891
|
|
955
892
|
// 延迟一点时间确保DOM完全更新并且之前的动画已被销毁
|
956
893
|
setTimeout(() => {
|
@@ -961,10 +898,20 @@ export default {
|
|
961
898
|
this.createLottieAnimation('bg', itemId, item.bgAnimView, item);
|
962
899
|
|
963
900
|
// 加载加载中动画
|
964
|
-
this.createLottieAnimation(
|
901
|
+
this.createLottieAnimation(
|
902
|
+
'loading',
|
903
|
+
itemId,
|
904
|
+
item.loadingAnimView,
|
905
|
+
item
|
906
|
+
);
|
965
907
|
|
966
908
|
// 加载前景动画
|
967
|
-
this.createLottieAnimation(
|
909
|
+
this.createLottieAnimation(
|
910
|
+
'front',
|
911
|
+
itemId,
|
912
|
+
item.frontAnimView,
|
913
|
+
item
|
914
|
+
);
|
968
915
|
});
|
969
916
|
}, 50); // 小延迟确保DOM已更新和旧动画已销毁
|
970
917
|
});
|
@@ -991,13 +938,14 @@ export default {
|
|
991
938
|
},
|
992
939
|
},
|
993
940
|
watch: {
|
994
|
-
'data.isEditing':{
|
995
|
-
|
996
|
-
|
997
|
-
|
998
|
-
|
999
|
-
}
|
1000
|
-
|
941
|
+
'data.isEditing': {
|
942
|
+
handler(newVal) {
|
943
|
+
this.isNotUpdated = newVal
|
944
|
+
if (!newVal) {
|
945
|
+
this.$set(this.data, 'list', this.data.list);
|
946
|
+
}
|
947
|
+
},
|
948
|
+
deep: true,
|
1001
949
|
},
|
1002
950
|
// 监听列表数据变化,自动更新处理后的数据
|
1003
951
|
'data.list': {
|
@@ -1006,12 +954,11 @@ export default {
|
|
1006
954
|
if (this.isProcessingData) {
|
1007
955
|
return;
|
1008
956
|
}
|
1009
|
-
|
957
|
+
|
1010
958
|
console.log('检测到data.list变化');
|
1011
959
|
this.generateDataList();
|
1012
960
|
this.$nextTick(() => {
|
1013
961
|
this.initLottieAnimations();
|
1014
|
-
this.rebindGestureEvents();
|
1015
962
|
});
|
1016
963
|
},
|
1017
964
|
deep: true,
|
@@ -1019,7 +966,6 @@ export default {
|
|
1019
966
|
},
|
1020
967
|
|
1021
968
|
mounted() {
|
1022
|
-
this.initGestureConfig()
|
1023
969
|
console.log(this.data, 'djdjdjdjdjdjdj');
|
1024
970
|
// 初始获取grid-box宽度
|
1025
971
|
this.updateGridBoxWidth();
|
@@ -1028,6 +974,9 @@ export default {
|
|
1028
974
|
// 初始化Lottie动画
|
1029
975
|
this.initLottieAnimations();
|
1030
976
|
},
|
977
|
+
updated(){
|
978
|
+
if(this.isNotUpdated){return}
|
979
|
+
},
|
1031
980
|
beforeDestroy() {
|
1032
981
|
// 确保清理所有事件监听器
|
1033
982
|
this.cancelLongPress();
|
@@ -1187,7 +1136,7 @@ button {
|
|
1187
1136
|
}
|
1188
1137
|
|
1189
1138
|
.shaking {
|
1190
|
-
animation: shake 0.
|
1139
|
+
animation: shake 0.6s infinite;
|
1191
1140
|
transform-origin: center center;
|
1192
1141
|
}
|
1193
1142
|
|
@@ -1209,9 +1158,4 @@ button {
|
|
1209
1158
|
transform: rotateZ(2deg);
|
1210
1159
|
}
|
1211
1160
|
}
|
1212
|
-
|
1213
|
-
.grid-item.shaking {
|
1214
|
-
animation: seesaw-rotate 0.6s linear infinite;
|
1215
|
-
transform-origin: center center;
|
1216
|
-
}
|
1217
1161
|
</style>
|
package/src/.DS_Store
DELETED
Binary file
|
package/src/components/.DS_Store
DELETED
Binary file
|