@dolphinweex/weex-harmony 0.1.32 → 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,7 +617,7 @@ export default {
|
|
670
617
|
|
671
618
|
// 检查长按过程中的移动
|
672
619
|
checkLongPressMove(e) {
|
673
|
-
if(this.data.isEditing){
|
620
|
+
if (this.data.isEditing) {
|
674
621
|
e.oriEvent.stopImmediatePropagation();
|
675
622
|
}
|
676
623
|
if (!this.data.isEditable) {
|
@@ -682,7 +629,7 @@ export default {
|
|
682
629
|
const moveY = Math.abs(touch.pageY - this.touchStartY);
|
683
630
|
|
684
631
|
// 如果水平移动大于垂直移动,则阻止事件传播
|
685
|
-
if (moveX > moveY
|
632
|
+
if (moveX > moveY && !this.isTouchDragging && this.data.isEditing) {
|
686
633
|
if (e.oriEvent) {
|
687
634
|
e.oriEvent.preventDefault();
|
688
635
|
e.oriEvent.stopPropagation();
|
@@ -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);
|
@@ -808,7 +754,7 @@ export default {
|
|
808
754
|
if (itemIndex === this.draggingIndex) continue;
|
809
755
|
|
810
756
|
const rect = item.getBoundingClientRect();
|
811
|
-
|
757
|
+
|
812
758
|
// 触摸点是否在元素的中心区域内
|
813
759
|
const centerX = (rect.left + rect.right) / 2;
|
814
760
|
const centerY = (rect.top + rect.bottom) / 2;
|
@@ -832,10 +778,7 @@ export default {
|
|
832
778
|
|
833
779
|
// 执行交换
|
834
780
|
if (targetIndex !== null && targetIndex !== this.draggingIndex) {
|
835
|
-
[
|
836
|
-
this.data.list[this.draggingIndex],
|
837
|
-
this.data.list[targetIndex],
|
838
|
-
] = [
|
781
|
+
[this.data.list[this.draggingIndex], this.data.list[targetIndex]] = [
|
839
782
|
this.data.list[targetIndex],
|
840
783
|
this.data.list[this.draggingIndex],
|
841
784
|
];
|
@@ -944,10 +887,7 @@ export default {
|
|
944
887
|
// 重置动画实例对象
|
945
888
|
this.lottieAnimations = {};
|
946
889
|
|
947
|
-
console.log(
|
948
|
-
'开始初始化Lottie动画,列表项数量:',
|
949
|
-
this.data.list.length
|
950
|
-
);
|
890
|
+
console.log('开始初始化Lottie动画,列表项数量:', this.data.list.length);
|
951
891
|
|
952
892
|
// 延迟一点时间确保DOM完全更新并且之前的动画已被销毁
|
953
893
|
setTimeout(() => {
|
@@ -958,10 +898,20 @@ export default {
|
|
958
898
|
this.createLottieAnimation('bg', itemId, item.bgAnimView, item);
|
959
899
|
|
960
900
|
// 加载加载中动画
|
961
|
-
this.createLottieAnimation(
|
901
|
+
this.createLottieAnimation(
|
902
|
+
'loading',
|
903
|
+
itemId,
|
904
|
+
item.loadingAnimView,
|
905
|
+
item
|
906
|
+
);
|
962
907
|
|
963
908
|
// 加载前景动画
|
964
|
-
this.createLottieAnimation(
|
909
|
+
this.createLottieAnimation(
|
910
|
+
'front',
|
911
|
+
itemId,
|
912
|
+
item.frontAnimView,
|
913
|
+
item
|
914
|
+
);
|
965
915
|
});
|
966
916
|
}, 50); // 小延迟确保DOM已更新和旧动画已销毁
|
967
917
|
});
|
@@ -988,13 +938,14 @@ export default {
|
|
988
938
|
},
|
989
939
|
},
|
990
940
|
watch: {
|
991
|
-
'data.isEditing':{
|
992
|
-
|
993
|
-
|
994
|
-
|
995
|
-
|
996
|
-
}
|
997
|
-
|
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,
|
998
949
|
},
|
999
950
|
// 监听列表数据变化,自动更新处理后的数据
|
1000
951
|
'data.list': {
|
@@ -1003,12 +954,11 @@ export default {
|
|
1003
954
|
if (this.isProcessingData) {
|
1004
955
|
return;
|
1005
956
|
}
|
1006
|
-
|
957
|
+
|
1007
958
|
console.log('检测到data.list变化');
|
1008
959
|
this.generateDataList();
|
1009
960
|
this.$nextTick(() => {
|
1010
961
|
this.initLottieAnimations();
|
1011
|
-
this.rebindGestureEvents();
|
1012
962
|
});
|
1013
963
|
},
|
1014
964
|
deep: true,
|
@@ -1016,7 +966,6 @@ export default {
|
|
1016
966
|
},
|
1017
967
|
|
1018
968
|
mounted() {
|
1019
|
-
this.initGestureConfig()
|
1020
969
|
console.log(this.data, 'djdjdjdjdjdjdj');
|
1021
970
|
// 初始获取grid-box宽度
|
1022
971
|
this.updateGridBoxWidth();
|
@@ -1025,6 +974,9 @@ export default {
|
|
1025
974
|
// 初始化Lottie动画
|
1026
975
|
this.initLottieAnimations();
|
1027
976
|
},
|
977
|
+
updated(){
|
978
|
+
if(this.isNotUpdated){return}
|
979
|
+
},
|
1028
980
|
beforeDestroy() {
|
1029
981
|
// 确保清理所有事件监听器
|
1030
982
|
this.cancelLongPress();
|
@@ -1184,7 +1136,7 @@ button {
|
|
1184
1136
|
}
|
1185
1137
|
|
1186
1138
|
.shaking {
|
1187
|
-
animation: shake 0.
|
1139
|
+
animation: shake 0.6s infinite;
|
1188
1140
|
transform-origin: center center;
|
1189
1141
|
}
|
1190
1142
|
|
@@ -1206,9 +1158,4 @@ button {
|
|
1206
1158
|
transform: rotateZ(2deg);
|
1207
1159
|
}
|
1208
1160
|
}
|
1209
|
-
|
1210
|
-
.grid-item.shaking {
|
1211
|
-
animation: seesaw-rotate 0.6s linear infinite;
|
1212
|
-
transform-origin: center center;
|
1213
|
-
}
|
1214
1161
|
</style>
|
package/src/.DS_Store
DELETED
Binary file
|
package/src/components/.DS_Store
DELETED
Binary file
|