@cc-component/cc-ex-component 1.2.8 → 1.3.0
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/assets/core/BaseReference.ts +10 -1
- package/assets/core/BaseReference.ts.meta +1 -1
- package/assets/core/BaseViewModelData.ts.meta +1 -1
- package/assets/core/ReferenceComponent.ts +15 -9
- package/assets/core/ReferenceComponent.ts.meta +1 -1
- package/assets/core/ViewModel.ts +170 -171
- package/assets/core/ViewModel.ts.meta +1 -1
- package/assets/core.meta +1 -1
- package/assets/ex/EXButton.ts.meta +1 -1
- package/assets/ex/ExCommon.ts.meta +1 -1
- package/assets/ex/ExTool.ts.meta +1 -1
- package/assets/ex/ExTween.ts.meta +1 -1
- package/assets/ex.meta +1 -1
- package/assets/lib/collectView/lib-ext/custom-grid-flow-layout.ts.meta +1 -1
- package/assets/lib/collectView/lib-ext/horizontal-center-layout.ts.meta +1 -1
- package/assets/lib/collectView/lib-ext/yx-card-page-layout.ts.meta +1 -1
- package/assets/lib/collectView/lib-ext/yx-carousel-layout.ts.meta +1 -1
- package/assets/lib/collectView/lib-ext/yx-cover-layout.ts.meta +1 -1
- package/assets/lib/collectView/lib-ext/yx-masonry-flow-layout.ts.meta +1 -1
- package/assets/lib/collectView/lib-ext/yx-page-view.ts.meta +1 -1
- package/assets/lib/collectView/lib-ext/yx-table-view.ts.meta +1 -1
- package/assets/lib/collectView/lib-ext.meta +1 -1
- package/assets/lib/collectView/lib_collect/yx-collection-view.ts +14 -0
- package/assets/lib/collectView/lib_collect/yx-collection-view.ts.meta +1 -1
- package/assets/lib/collectView/lib_collect/yx-compact-flow-layout.ts.meta +1 -1
- package/assets/lib/collectView/lib_collect/yx-flow-layout.ts +12 -5
- package/assets/lib/collectView/lib_collect/yx-flow-layout.ts.meta +1 -1
- package/assets/lib/collectView/lib_collect/yx-page-layout.ts +100 -0
- package/assets/lib/collectView/lib_collect/yx-page-layout.ts.meta +9 -0
- package/assets/lib/collectView/lib_collect/yx-table-layout.ts.meta +1 -1
- package/assets/lib/collectView/lib_collect.meta +1 -1
- package/assets/lib/collectView.meta +1 -1
- package/assets/lib/tableView/IListView.ts.meta +1 -1
- package/assets/lib/tableView/ListView.ts +1 -1
- package/assets/lib/tableView/ListView.ts.meta +1 -1
- package/assets/lib/tableView/ListViewPage.ts +56 -20
- package/assets/lib/tableView/ListViewPage.ts.meta +1 -1
- package/assets/lib/tableView/ListViewPageLoop.ts +1 -1
- package/assets/lib/tableView/ListViewPageLoop.ts.meta +1 -1
- package/assets/lib/tableView/TableView.ts +22 -2
- package/assets/lib/tableView/TableView.ts.meta +1 -1
- package/assets/lib/tableView.meta +1 -1
- package/assets/lib.meta +1 -1
- package/assets.meta +1 -1
- package/index.ts.meta +1 -1
- package/package.json +1 -1
- package/package.json.meta +1 -1
package/assets/core.meta
CHANGED
package/assets/ex/ExTool.ts.meta
CHANGED
package/assets/ex.meta
CHANGED
|
@@ -522,6 +522,20 @@ export abstract class YXLayout {
|
|
|
522
522
|
* 列表组件销毁时执行
|
|
523
523
|
*/
|
|
524
524
|
onDestroy() { }
|
|
525
|
+
|
|
526
|
+
|
|
527
|
+
//#region 新加
|
|
528
|
+
/**
|
|
529
|
+
* 转换为真实索引
|
|
530
|
+
* 列表数量大小为 3 倍实际数据数量，需要通过求余方式获取数据，避免数组越界
|
|
531
|
+
*/
|
|
532
|
+
dataCount: number = 0
|
|
533
|
+
originIndex(index: number): number {
|
|
534
|
+
return 0
|
|
535
|
+
}
|
|
536
|
+
originIndexCount(): number {
|
|
537
|
+
return this.dataCount * 3
|
|
538
|
+
}
|
|
525
539
|
}
|
|
526
540
|
|
|
527
541
|
/**
|
|
@@ -100,11 +100,18 @@ enum _yx_flow_layout_section_kinds {
|
|
|
100
100
|
*/
|
|
101
101
|
export class YXFlowLayout extends YXBinaryLayout {
|
|
102
102
|
|
|
103
|
-
/**
|
|
104
|
-
* 是否开启分页滚动效果
|
|
105
|
-
*/
|
|
106
|
-
pagingEnabled: boolean = false
|
|
107
103
|
|
|
104
|
+
// pagingEnabled: boolean = false
|
|
105
|
+
_pagingEnabled: boolean = false
|
|
106
|
+
set pagingEnabled(value: boolean) {
|
|
107
|
+
this._pagingEnabled = value
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* 是否开启分页滚动效果
|
|
111
|
+
*/
|
|
112
|
+
get pagingEnabled() {
|
|
113
|
+
return this._pagingEnabled
|
|
114
|
+
}
|
|
108
115
|
/**
|
|
109
116
|
* 分页吸附动画时间
|
|
110
117
|
*/
|
|
@@ -119,7 +126,7 @@ export class YXFlowLayout extends YXBinaryLayout {
|
|
|
119
126
|
/**
|
|
120
127
|
* 约束优先级
|
|
121
128
|
*/
|
|
122
|
-
priority: _yx_flow_layout_priority = YXFlowLayout.Priority.
|
|
129
|
+
priority: _yx_flow_layout_priority = YXFlowLayout.Priority.SIDE
|
|
123
130
|
static Priority = _yx_flow_layout_priority
|
|
124
131
|
|
|
125
132
|
/**
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { ScrollView } from "cc";
|
|
2
|
+
import { YXFlowLayout } from "./yx-flow-layout";
|
|
3
|
+
import { YXCollectionView, YXIndexPath } from "./yx-collection-view";
|
|
4
|
+
import { math } from "cc";
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export class YXPagelayout extends YXFlowLayout {
|
|
8
|
+
|
|
9
|
+
_pagingEnabledLoop = false
|
|
10
|
+
set pagingEnabledLoop(value: boolean) {
|
|
11
|
+
this._pagingEnabledLoop = value
|
|
12
|
+
}
|
|
13
|
+
get pagingEnabledLoop() {
|
|
14
|
+
return this._pagingEnabledLoop
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* 记录当前页面
|
|
18
|
+
*/
|
|
19
|
+
pageIdx: number = -1
|
|
20
|
+
|
|
21
|
+
collectionView: YXCollectionView
|
|
22
|
+
scrollView: ScrollView;
|
|
23
|
+
dataCount: number = 0
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
pageAction: (idx: number) => void
|
|
27
|
+
loop(collectionView: YXCollectionView) {
|
|
28
|
+
/**
|
|
29
|
+
* 无限轮播实现思路
|
|
30
|
+
* 列表容器总体大小为 数据条数 * 3 的大小，每次在滚动结束的时候，偏移量总是复位到中间的位置，以此来实现无限滚动
|
|
31
|
+
* 比如原始数据 [ 0,1,2 ]，实际上在列表中为 [ 0,1,2, 0,1,2, 0,1,2 ]，每次滑动结束之后位置总是复位到中间区域
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
// 注册列表内需要使用的 cell 节点类型
|
|
35
|
+
// 这个演示是通过编辑器绑定的，可以查看场景内 list 节点里的 register cells 配置
|
|
36
|
+
// this.listComp.register(`cell`, () => instantiate('your cell prefab'))
|
|
37
|
+
this.collectionView = collectionView
|
|
38
|
+
this.scrollView = collectionView.scrollView
|
|
39
|
+
this.scrollView.node.on(ScrollView.EventType.SCROLLING, this.checkPageChange, this)
|
|
40
|
+
this.scrollView.node.on(ScrollView.EventType.SCROLL_ENDED, this.resetOffset, this)
|
|
41
|
+
this.pagingEnabled = true;
|
|
42
|
+
this.collectionView.recycleInterval = 0
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
onDestroy(): void {
|
|
46
|
+
this.scrollView.node.off(ScrollView.EventType.SCROLLING, this.checkPageChange, this)
|
|
47
|
+
this.scrollView.node.off(ScrollView.EventType.SCROLL_ENDED, this.resetOffset, this)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* 获取当前页面索引
|
|
52
|
+
* @returns
|
|
53
|
+
*/
|
|
54
|
+
getCurrentPageIndex(): number {
|
|
55
|
+
let offset = this.collectionView.scrollView.getScrollOffset()
|
|
56
|
+
offset.x = - offset.x
|
|
57
|
+
let idx = Math.round(offset.x / this.collectionView.scrollView.view.width)
|
|
58
|
+
return idx
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* 检查页面变化
|
|
63
|
+
*/
|
|
64
|
+
checkPageChange() {
|
|
65
|
+
const idx = this.getCurrentPageIndex()
|
|
66
|
+
if (this.pageIdx !== idx) {
|
|
67
|
+
this.pageIdx = idx
|
|
68
|
+
// 走到这里表示页面发生变化，可以处理需要处理的逻辑
|
|
69
|
+
this.pageAction && this.pageAction(this.originIndex(this.pageIdx))
|
|
70
|
+
console.log(this.originIndex(this.pageIdx));
|
|
71
|
+
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* 使列表复位到中间区域
|
|
77
|
+
*/
|
|
78
|
+
resetOffset() {
|
|
79
|
+
let offset = this.scrollView.getScrollOffset()
|
|
80
|
+
offset.x = - offset.x
|
|
81
|
+
let idx = Math.round(offset.x / this.scrollView.view.width) % this.dataCount
|
|
82
|
+
offset.x = this.scrollView.view.width * (this.dataCount + idx)
|
|
83
|
+
this.scrollView.scrollToOffset(offset)
|
|
84
|
+
// 直接设置滚动位置不会触发刷新，这里强制刷新一下
|
|
85
|
+
this.collectionView.markForUpdateVisibleData(true)
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* 转换为真实索引
|
|
90
|
+
* 列表数量大小为 3 倍实际数据数量，需要通过求余方式获取数据，避免数组越界
|
|
91
|
+
*/
|
|
92
|
+
originIndex(index: number): number {
|
|
93
|
+
return index % this.dataCount
|
|
94
|
+
}
|
|
95
|
+
originIndexCount(): number {
|
|
96
|
+
return this.dataCount * 3
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
|
|
@@ -28,7 +28,7 @@ export class ListViewPage extends ListView {
|
|
|
28
28
|
this.node.on(ScrollView.EventType.SCROLL_BEGAN, this.onTouchStart, this);
|
|
29
29
|
this.node.on(ScrollView.EventType.TOUCH_UP, this.onTouchEnd, this);
|
|
30
30
|
this.node.on(ScrollView.EventType.SCROLLING, this._scrollViewDidScroll, this);
|
|
31
|
-
this.node.on(Node.EventType.TOUCH_CANCEL, this.
|
|
31
|
+
this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
|
|
32
32
|
|
|
33
33
|
//ScrollView.EventType
|
|
34
34
|
}
|
|
@@ -83,7 +83,9 @@ export class ListViewPage extends ListView {
|
|
|
83
83
|
this.content = content
|
|
84
84
|
viewMask.getComponent(Widget).updateAlignment()
|
|
85
85
|
}
|
|
86
|
+
|
|
86
87
|
this.contentUT = this.content.getComponent(UITransform)
|
|
88
|
+
let count = 0
|
|
87
89
|
if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
|
|
88
90
|
this.contentUT.anchorX = this.config.isLoop ? 0.5 : 0
|
|
89
91
|
this.contentUT.anchorY = 0.5
|
|
@@ -91,10 +93,13 @@ export class ListViewPage extends ListView {
|
|
|
91
93
|
this.contentUT.anchorX = 0.5
|
|
92
94
|
this.contentUT.anchorY = this.config.isLoop ? 0.5 : 1
|
|
93
95
|
}
|
|
96
|
+
|
|
94
97
|
this.nodeUT.setAnchorPoint(0.5, 0.5)
|
|
95
98
|
const mask_node = this.content.parent.getComponent(UITransform)
|
|
96
99
|
this.contentUT.contentSize = new Size(mask_node.width, mask_node.height)
|
|
97
100
|
this.scrollTo(v2(0))
|
|
101
|
+
|
|
102
|
+
|
|
98
103
|
}
|
|
99
104
|
initView() {
|
|
100
105
|
if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
|
|
@@ -119,7 +124,7 @@ export class ListViewPage extends ListView {
|
|
|
119
124
|
this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
|
|
120
125
|
this.node.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
|
|
121
126
|
this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
|
|
122
|
-
this.node.off(Node.EventType.TOUCH_CANCEL, this.
|
|
127
|
+
this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
|
|
123
128
|
|
|
124
129
|
}
|
|
125
130
|
|
|
@@ -208,6 +213,7 @@ export class ListViewPage extends ListView {
|
|
|
208
213
|
|
|
209
214
|
|
|
210
215
|
_reloadData() {
|
|
216
|
+
this.stopAutoScroll()
|
|
211
217
|
let numberOfItems = this.delegate.numberOfItems();
|
|
212
218
|
this.numberOfItems = numberOfItems;
|
|
213
219
|
|
|
@@ -235,7 +241,7 @@ export class ListViewPage extends ListView {
|
|
|
235
241
|
}
|
|
236
242
|
let offsetMax = this.getMaxScrollOffset();
|
|
237
243
|
|
|
238
|
-
|
|
244
|
+
|
|
239
245
|
|
|
240
246
|
this.scrollToOffset(v2(-offset.x, offset.y))
|
|
241
247
|
this.isReload = true;
|
|
@@ -296,6 +302,7 @@ export class ListViewPage extends ListView {
|
|
|
296
302
|
start_pos = this.getShowRowListPos()
|
|
297
303
|
|
|
298
304
|
this.visbleCellList.forEach((cell, index) => {
|
|
305
|
+
console.log(`cell.row:${cell.row_data},${cell.row}`)
|
|
299
306
|
let x = 0;
|
|
300
307
|
if (lastCell) {
|
|
301
308
|
if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
|
|
@@ -358,27 +365,40 @@ export class ListViewPage extends ListView {
|
|
|
358
365
|
target_pos = v3(0, 0, 0)
|
|
359
366
|
currentRow = 0
|
|
360
367
|
}
|
|
368
|
+
|
|
361
369
|
const count = Math.max(showChount - (showChount - currentRow), 0);
|
|
362
370
|
|
|
363
371
|
const width = this.getWidth() + this.config.cellSpace;
|
|
364
372
|
const max_height = width * count
|
|
365
373
|
let start = 0
|
|
366
374
|
if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
start =
|
|
375
|
+
if (target_pos) {
|
|
376
|
+
|
|
377
|
+
start = (target_pos.x - max_height)
|
|
378
|
+
// if (max_height === 0) { start = 0 }
|
|
379
|
+
if (start <= 0) {
|
|
380
|
+
start = start + this.getWidth() * 0.5
|
|
381
|
+
}
|
|
382
|
+
if (this.lastCellCount <= 0) {
|
|
383
|
+
start += this.config.cellSpaceLeft
|
|
384
|
+
}
|
|
370
385
|
}
|
|
371
|
-
|
|
372
|
-
start += this.config.cellSpaceLeft
|
|
386
|
+
else {
|
|
387
|
+
start += this.config.cellSpaceLeft + this.getWidth() * 0.5
|
|
373
388
|
}
|
|
374
389
|
} else {
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
390
|
+
if (target_pos) {
|
|
391
|
+
start = (target_pos.y + max_height)
|
|
392
|
+
if (start >= 0) {
|
|
393
|
+
start = start - this.getWidth() * 0.5
|
|
394
|
+
}
|
|
395
|
+
if (this.lastCellCount <= 0) {
|
|
396
|
+
start -= this.config.cellSpaceLeft
|
|
397
|
+
}
|
|
398
|
+
} else {
|
|
399
|
+
start += this.config.cellSpaceLeft + this.getWidth() * 0.5
|
|
381
400
|
}
|
|
401
|
+
|
|
382
402
|
}
|
|
383
403
|
|
|
384
404
|
return start
|
|
@@ -392,13 +412,12 @@ export class ListViewPage extends ListView {
|
|
|
392
412
|
const count_n = this.numberOfItems - this.max_row_data;
|
|
393
413
|
let row = count_n > 0 ? this.min_row_data : Math.max(this.min_row_data - (-count_n + 1), 0)
|
|
394
414
|
if (this.visbleCellList.length > 0) {
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
415
|
+
const ok_1 = this.numberOfItems > this.config.maxShowCount
|
|
416
|
+
const ok_2 = this.currentRow < this.numberOfItems - 1
|
|
417
|
+
const ok_3 = this.max_row_data + 1 < this.numberOfItems
|
|
418
|
+
const ok_4 = (this.currentRow === this.visbleCellList[this.visbleCellList.length - 1].row_data || this.currentRow === this.visbleCellList[this.visbleCellList.length - 2].row_data)
|
|
398
419
|
|
|
399
|
-
|
|
400
|
-
this.currentRow === this.visbleCellList[this.visbleCellList.length - 2].row_data)
|
|
401
|
-
) {
|
|
420
|
+
if (ok_1 && ok_2 && ok_3 && ok_4 && row != 0) {
|
|
402
421
|
row += 1;
|
|
403
422
|
this.max_row_data += 1
|
|
404
423
|
//console.error("走了", this.max_row_data)
|
|
@@ -457,6 +476,22 @@ export class ListViewPage extends ListView {
|
|
|
457
476
|
this.touchEnd(event, false)
|
|
458
477
|
}
|
|
459
478
|
|
|
479
|
+
}
|
|
480
|
+
onTouchCancel(event: EventTouch) {
|
|
481
|
+
|
|
482
|
+
if (this.config.isPage)
|
|
483
|
+
this.onTouchEnd(event)
|
|
484
|
+
|
|
485
|
+
// const of = this.getScrollOffset()
|
|
486
|
+
// if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
|
|
487
|
+
// if (of.x < 0)
|
|
488
|
+
// this.onTouchEnd(event)
|
|
489
|
+
// } else {
|
|
490
|
+
// if (of.x < 0)
|
|
491
|
+
// this.onTouchEnd(event)
|
|
492
|
+
// }
|
|
493
|
+
|
|
494
|
+
|
|
460
495
|
}
|
|
461
496
|
|
|
462
497
|
touchEnd(event: EventTouch, isInit) {
|
|
@@ -637,6 +672,7 @@ export class ListViewPage extends ListView {
|
|
|
637
672
|
_scrollViewDidScrollPage(is_move = false) {
|
|
638
673
|
this._updateMaxNode()
|
|
639
674
|
const of = this.getScrollOffset();
|
|
675
|
+
// console.log(of)
|
|
640
676
|
if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
|
|
641
677
|
this.velocity = Math.abs((of.x - this.lastOffset.x))
|
|
642
678
|
} else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"ver":"4.0.24","importer":"typescript","imported":true,"uuid":"
|
|
1
|
+
{"ver":"4.0.24","importer":"typescript","imported":true,"uuid":"76830660-44be-4583-804a-12c8c9b6f838","files":[],"subMetas":{},"userData":{}}
|
|
@@ -33,29 +33,49 @@ export class TableView extends Component {
|
|
|
33
33
|
return this.delegate ? true : false;
|
|
34
34
|
}
|
|
35
35
|
finish: Function;
|
|
36
|
+
isOnload = false;
|
|
36
37
|
// view: Node;
|
|
37
38
|
protected onLoad(): void {
|
|
38
39
|
if (this.config.isLoop) {
|
|
39
40
|
this.scrollView = this.node.addComponent(ListViewPageLoop)
|
|
41
|
+
this.scrollView.elastic = false
|
|
40
42
|
} else {
|
|
41
43
|
this.scrollView = this.node.addComponent(ListViewPage)
|
|
44
|
+
this.scrollView.elastic = this.config.isPage ? false : true
|
|
42
45
|
}
|
|
43
46
|
this.scrollView.elastic = false
|
|
47
|
+
|
|
44
48
|
this.scrollView.delegate = this.delegate;
|
|
45
49
|
this.scrollView.config = this.config;
|
|
46
50
|
this.scrollView.init();
|
|
47
|
-
this.
|
|
51
|
+
this.isOnload = true
|
|
52
|
+
if (this.finish) {
|
|
53
|
+
this.finish()
|
|
54
|
+
}
|
|
55
|
+
|
|
48
56
|
}
|
|
49
57
|
init(delegate: IListView) {
|
|
50
58
|
this.delegate = delegate
|
|
51
59
|
//解决一些设置时间点慢的问题
|
|
52
60
|
if (this.scrollView) {
|
|
53
61
|
this.scrollView.delegate = delegate
|
|
62
|
+
const itemSize = this.delegate.itemSize();
|
|
63
|
+
let count = 0
|
|
64
|
+
if (this.config.scrollDirection === collection_view_scroll_direction.HORIZONTAL) {
|
|
65
|
+
count = this.scrollView.nodeUT.width / (itemSize.width + this.config.cellSpace)//+ this.config.cellSpaceLeft + this.config.cellSpaceRight
|
|
66
|
+
} else {
|
|
67
|
+
count = this.scrollView.nodeUT.height / (itemSize.height + this.config.cellSpace)//+ this.config.cellSpaceLeft + this.config.cellSpaceRight
|
|
68
|
+
}
|
|
69
|
+
this.config.maxShowCount = Math.max(Math.floor(count) + 3, this.config.maxShowCount)
|
|
70
|
+
console.log("maxShowCount", this.config.maxShowCount)
|
|
54
71
|
}
|
|
55
|
-
|
|
56
72
|
}
|
|
57
73
|
onLoadFinish(call: () => void) {
|
|
58
74
|
this.finish = call
|
|
75
|
+
if (this.isOnload) {
|
|
76
|
+
this.finish?.()
|
|
77
|
+
this.finish = null
|
|
78
|
+
}
|
|
59
79
|
}
|
|
60
80
|
|
|
61
81
|
public reload() {
|