如何在CocosCreator中做一个List

CocosCreator版本：2.3.4

cocos没有List组件，所以要自己写。从cocos的example项目中找到assets/case/02_ui/05_listView的demo来改造。

自写一个虚拟列表，有垂直布局，水平布局，网格布局和Padding的List

Demo地址：https://files-cdn.cnblogs.com/files/gamedaybyday/cocos2.3.4_ListViewDemo_Grid.7z

cocos原来的LayOut做列表，有100个数据就有100个实例（左侧图）。

而虚拟列表则只有你看见的实例存在，当滑动时会循环使用。（右侧图）

List使用方法

使用方法就是在ScrollView上添加List组件即可。

List的item列表项直接放在content下，并赋值給List组件，item需要添加继承自ItemRender的对象，用于数据刷新。

代码中给List设置数据

1. //设置排行榜数据
2. let rankData = [];
3. for(let i=0;i<100;i++){
4. rankData.push({rank:i, name:"名称"});
5. }
6.  
7. this.rankList.setData(rankData);

源码

1. // Learn TypeScript:
2. // - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
3. // Learn Attribute:
4. // - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
5. // Learn life-cycle callbacks:
6. // - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
7.  
8. import ItemRender from "./ItemRender"
9.  
10. const { ccclass, property } = cc._decorator;
11.  
12. /**列表排列方式 */
13. export enum ListType {
14. /**水平排列 */
15. Horizontal = 1,
16. /**垂直排列 */
17. Vertical = 2,
18. /**网格排列 */
19. Grid = 3
20. }
21.  
22. /**网格布局中的方向 */
23. export enum StartAxisType {
24. /**水平排列 */
25. Horizontal = 1,
26. /**垂直排列 */
27. Vertical = 2,
28. }
29.  
30. /**
31. * 列表
32. * 根据cocos_example的listView改动而来
33. * @author chenkai 2020.7.8
34. * @example
35. * 1.创建cocos的ScrollView组件，添加List，设置List属性即可
36. *
37. */
38. @ccclass
39. export default class List extends cc.Component {
40.  
41. //==================== 属性面板 =========================
42. /**列表选项 */
43. @property({ type: cc.Node, tooltip: "列表项" })
44. public itemRender: cc.Node = null;
45.  
46. /**排列方式 */
47. @property({ type: cc.Enum(ListType), tooltip: "排列方式" })
48. public type: ListType = ListType.Vertical;
49.  
50. /**网格布局中的方向 */
51. @property({ type: cc.Enum(StartAxisType), tooltip: "网格布局中的方向", visible() { return this.type == ListType.Grid } })
52. public startAxis: StartAxisType = StartAxisType.Horizontal;
53.  
54. /**列表项之间X间隔 */
55. @property({ type: cc.Integer, tooltip: "列表项X间隔", visible() { return (this.type == ListType.Horizontal || this.type == ListType.Grid) } })
56. public spaceX: number = 0;
57.  
58. /**列表项之间Y间隔 */
59. @property({ type: cc.Integer, tooltip: "列表项Y间隔", visible() { return this.type == ListType.Vertical || this.type == ListType.Grid } })
60. public spaceY: number = 0;
61.  
62. /**上间距 */
63. @property({ type: cc.Integer, tooltip: "上间距", visible() { return (this.type == ListType.Vertical || this.type == ListType.Grid) } })
64. public padding_top: number = 0;
65.  
66. /**下间距 */
67. @property({ type: cc.Integer, tooltip: "下间距", visible() { return (this.type == ListType.Vertical || this.type == ListType.Grid) } })
68. public padding_buttom: number = 0;
69.  
70. /**左间距 */
71. @property({ type: cc.Integer, tooltip: "左间距", visible() { return (this.type == ListType.Horizontal || this.type == ListType.Grid) } })
72. public padding_left: number = 0;
73.  
74. @property(cc.Integer)
75. public _padding: number = 0;
76.  
77. /**右间距 */
78. @property({ type: cc.Integer, tooltip: "右间距", visible() { return (this.type == ListType.Horizontal || this.type == ListType.Grid) } })
79. public padding_right: number = 0;
80.  
81. //====================== 滚动容器 ===============================
82. /**列表滚动容器 */
83. public scrollView: cc.ScrollView = null;
84. /**scrollView的内容容器 */
85. private content: cc.Node = null;
86.  
87. //======================== 列表项 ===========================
88. /**列表项数据 */
89. private itemDataList: Array<any> = [];
90. /**应创建的实例数量 */
91. private spawnCount: number = 0;
92. /**存放列表项实例的数组 */
93. private itemList: Array<cc.Node> = [];
94. /**item的高度 */
95. private itemHeight: number = 0;
96. /**item的宽度 */
97. private itemWidth: number = 0;
98. /**存放不再使用中的列表项 */
99. private itemPool: Array<cc.Node> = [];
100.  
101. //======================= 计算参数 ==========================
102. /**距离scrollView中心点的距离，超过这个距离的item会被重置，一般设置为 scrollVIew.height/2 + item.heigt/2 + space，因为这个距离item正好超出scrollView显示范围 */
103. private halfScrollView: number = 0;
104. /**上一次content的X值，用于和现在content的X值比较，得出是向左还是向右滚动 */
105. private lastContentPosX: number = 0;
106. /**上一次content的Y值，用于和现在content的Y值比较，得出是向上还是向下滚动 */
107. private lastContentPosY: number = 0;
108. /**网格行数 */
109. private gridRow: number = 0;
110. /**网格列数 */
111. private gridCol: number = 0;
112. /**刷新时间，单位s */
113. private updateTimer: number = 0;
114. /**刷新间隔，单位s */
115. private updateInterval: number = 0.1;
116. /**是否滚动容器 */
117. private bScrolling: boolean = false;
118. /**刷新的函数 */
119. private updateFun: Function = function () { };
120.  
121. onLoad() {
122. this.itemHeight = this.itemRender.height;
123. this.itemWidth = this.itemRender.width;
124. this.scrollView = this.node.getComponent(cc.ScrollView);
125. this.content = this.scrollView.content;
126. this.content.anchorX = 0;
127. this.content.anchorY = 1;
128. this.content.removeAllChildren();
129. this.scrollView.node.on("scrolling", this.onScrolling, this);
130. }
131.  
132. /**
133. * 列表数据 (列表数据复制使用，如果列表数据改变，则需要重新设置一遍数据)
134. * @param itemDataList item数据列表
135. */
136. public setData(itemDataList: Array<any>) {
137. this.itemDataList = itemDataList.slice();
138. this.updateContent();
139. }
140.  
141. /**计算列表的各项参数 */
142. private countListParam() {
143. let dataLen = this.itemDataList.length;
144. if (this.type == ListType.Vertical) {
145. this.scrollView.horizontal = false;
146. this.scrollView.vertical = true;
147. this.content.width = this.content.parent.width;
148. this.content.height = dataLen * this.itemHeight + (dataLen - 1) * this.spaceY + this.padding_top + this.padding_buttom;
149. this.spawnCount = Math.round(this.scrollView.node.height / (this.itemHeight + this.spaceY)) + 2; //计算创建的item实例数量，比当前scrollView容器能放下的item数量再加上2个
150. this.halfScrollView = this.scrollView.node.height / 2 + this.itemHeight / 2 + this.spaceY; //计算bufferZone，item的显示范围
151. this.updateFun = this.updateV;
152. } else if (this.type == ListType.Horizontal) {
153. this.scrollView.horizontal = true;
154. this.scrollView.vertical = false;
155. this.content.width = dataLen * this.itemWidth + (dataLen - 1) * this.spaceX + this.padding_left + this.padding_right;
156. this.content.height = this.content.parent.height;
157. this.spawnCount = Math.round(this.scrollView.node.width / (this.itemWidth + this.spaceX)) + 2;
158. this.halfScrollView = this.scrollView.node.width / 2 + this.itemWidth / 2 + this.spaceX;
159. this.updateFun = this.udpateH;
160. } else if (this.type == ListType.Grid) {
161. if (this.startAxis == StartAxisType.Vertical) {
162. this.scrollView.horizontal = false;
163. this.scrollView.vertical = true;
164. this.content.width = this.content.parent.width;
165. //如果left和right间隔过大，导致放不下一个item，则left和right都设置为0，相当于不生效
166. if (this.padding_left + this.padding_right + this.itemWidth + this.spaceX > this.content.width) {
167. this.padding_left = 0;
168. this.padding_right = 0;
169. console.error("padding_left或padding_right过大");
170. }
171.  
172. this.gridCol = Math.floor((this.content.width - this.padding_left - this.padding_right) / (this.itemWidth + this.spaceX));
173. this.gridRow = Math.ceil(dataLen / this.gridCol);
174. this.content.height = this.gridRow * this.itemHeight + (this.gridRow - 1) * this.spaceY + this.padding_top + this.padding_buttom;
175. this.spawnCount = Math.round(this.scrollView.node.height / (this.itemHeight + this.spaceY)) * this.gridCol + this.gridCol * 2;
176. this.halfScrollView = this.scrollView.node.height / 2 + this.itemHeight / 2 + this.spaceY;
177. this.updateFun = this.updateGrid_V;
178. } else if (this.startAxis == StartAxisType.Horizontal) {
179. this.scrollView.horizontal = true;
180. this.scrollView.vertical = false;
181. //计算高间隔
182. this.content.height = this.content.parent.height;
183. //如果left和right间隔过大，导致放不下一个item，则left和right都设置为0，相当于不生效
184. if (this.padding_top + this.padding_buttom + this.itemHeight + this.spaceY > this.content.height) {
185. this.padding_top = 0;
186. this.padding_buttom = 0;
187. console.error("padding_top或padding_buttom过大");
188. }
189.  
190. this.gridRow = Math.floor((this.content.height - this.padding_top - this.padding_buttom) / (this.itemHeight + this.spaceY));
191. this.gridCol = Math.ceil(dataLen / this.gridRow);
192. this.content.width = this.gridCol * this.itemWidth + (this.gridCol - 1) * this.spaceX + this.padding_left + this.padding_right;
193. this.spawnCount = Math.round(this.scrollView.node.width / (this.itemWidth + this.spaceX)) * this.gridRow + this.gridRow * 2;
194. this.halfScrollView = this.scrollView.node.width / 2 + this.itemWidth / 2 + this.spaceX;
195. this.updateFun = this.updateGrid_H;
196. }
197. }
198. }
199.  
200. /**
201. * 创建列表
202. * @param startIndex 起始显示的数据索引 0表示第一项
203. * @param offset scrollView偏移量
204. */
205. private createList(startIndex: number, offset: cc.Vec2) {
206. //当需要显示的数据长度 > 虚拟列表长度， 删除最末尾几个数据时，列表需要重置位置到scrollView最底端
207. if (this.itemDataList.length > this.spawnCount && (startIndex + this.spawnCount - 1) >= this.itemDataList.length) {
208. startIndex = this.itemDataList.length - this.spawnCount;
209. offset = this.scrollView.getMaxScrollOffset();
210.  
211. //当需要显示的数据长度 <= 虚拟列表长度， 隐藏多余的虚拟列表项
212. } else if (this.itemDataList.length <= this.spawnCount) {
213. startIndex = 0;
214. }
215.  
216. for (let i = 0; i < this.spawnCount; i++) {
217. let item: cc.Node;
218. //需要显示的数据索引在数据范围内，则item实例显示出来
219. if (i + startIndex < this.itemDataList.length) {
220. if (this.itemList[i] == null) {
221. item = this.getItem();
222. this.itemList.push(item);
223. item.parent = this.content;
224. } else {
225. item = this.itemList[i];
226. }
227. //需要显示的数据索引超过了数据范围，则item实例隐藏起来
228. } else {
229. //item实例数量 > 需要显示的数据量
230. if (this.itemList.length > (this.itemDataList.length - startIndex)) {
231. item = this.itemList.pop();
232. item.removeFromParent();
233. this.itemPool.push(item);
234. }
235. continue;
236. }
237.  
238. let itemRender: ItemRender = item.getComponent(ItemRender);
239. itemRender.itemIndex = i + startIndex;
240. itemRender.data = this.itemDataList[i + startIndex];
241. itemRender.dataChanged();
242.  
243. if (this.type == ListType.Vertical) {
244. //因为content的锚点X是0，所以item的x值是content.with/2表示居中，锚点Y是1，所以item的y值从content顶部向下是0到负无穷。所以item.y= -item.height/2时，是在content的顶部。
245. item.setPosition(this.content.width / 2, -item.height * (0.5 + i + startIndex) - this.spaceY * (i + startIndex) - this.padding_top);
246. } else if (this.type == ListType.Horizontal) {
247. item.setPosition(item.width * (0.5 + i + startIndex) + this.spaceX * (i + startIndex) + this.padding_left, -this.content.height / 2);
248. } else if (this.type == ListType.Grid) {
249. if (this.startAxis == StartAxisType.Vertical) {
250. var row = Math.floor((i + startIndex) / this.gridCol);
251. var col = (i + startIndex) % this.gridCol;
252. item.setPosition(item.width * (0.5 + col) + this.spaceX * col + this.padding_left, -item.height * (0.5 + row) - this.spaceY * row - this.padding_top);
253. item.opacity = 255;
254. } else if (this.startAxis == StartAxisType.Horizontal) {
255. var row = (i + startIndex) % this.gridRow;
256. var col = Math.floor((i + startIndex) / this.gridRow);
257. item.setPosition(item.width * (0.5 + col) + this.spaceX * col + this.padding_left, -item.height * (0.5 + row) - this.spaceY * row - this.padding_top);
258. item.opacity = 255;
259. }
260. }
261. }
262.  
263. this.scrollView.scrollToOffset(offset);
264. }
265.  
266. /**获取一个列表项 */
267. private getItem() {
268. if (this.itemPool.length == 0) {
269. return cc.instantiate(this.itemRender);
270. } else {
271. return this.itemPool.pop();
272. }
273. }
274.  
275. update(dt) {
276. if (this.bScrolling == false) {
277. return;
278. }
279. this.updateTimer += dt;
280. if (this.updateTimer < this.updateInterval) {
281. return;
282. }
283. this.updateTimer = 0;
284. this.bScrolling = false;
285. this.updateFun();
286. }
287.  
288. onScrolling() {
289. this.bScrolling = true;
290. }
291.  
292. /**垂直排列 */
293. private updateV() {
294. let items = this.itemList;
295. let item;
296. let bufferZone = this.halfScrollView;
297. let isUp = this.scrollView.content.y > this.lastContentPosY;
298. let offset = (this.itemHeight + this.spaceY) * items.length;
299. for (let i = 0; i < items.length; i++) {
300. item = items[i];
301. let viewPos = this.getPositionInView(item);
302. if (isUp) {
303. //item上滑时，超出了scrollView上边界，将item移动到下方复用，item移动到下方的位置必须不超过content的下边界
304. if (viewPos.y > bufferZone && item.y - offset - this.padding_buttom > -this.content.height) {
305. let itemRender: ItemRender = item.getComponent(ItemRender);
306. let itemIndex = itemRender.itemIndex + items.length;
307. itemRender.itemIndex = itemIndex;
308. itemRender.data = this.itemDataList[itemIndex];
309. itemRender.dataChanged();
310. item.y = item.y - offset;
311. }
312. } else {
313. //item下滑时，超出了scrollView下边界，将item移动到上方复用，item移动到上方的位置必须不超过content的上边界
314. if (viewPos.y < -bufferZone && item.y + offset + this.padding_top < 0) {
315. let itemRender: ItemRender = item.getComponent(ItemRender);
316. let itemIndex = itemRender.itemIndex - items.length;
317. itemRender.itemIndex = itemIndex;
318. itemRender.data = this.itemDataList[itemIndex];
319. itemRender.dataChanged();
320. item.y = item.y + offset;
321. }
322. }
323. }
324. this.lastContentPosY = this.scrollView.content.y;
325. }
326.  
327. /**水平排列 */
328. private udpateH() {
329. let items = this.itemList;
330. let item;
331. let bufferZone = this.halfScrollView;
332. let isRight = this.scrollView.content.x > this.lastContentPosX;
333. let offset = (this.itemWidth + this.spaceX) * items.length;
334. for (let i = 0; i < items.length; i++) {
335. item = items[i];
336. let viewPos = this.getPositionInView(item);
337. if (isRight) {
338. //item右滑时，超出了scrollView右边界，将item移动到左方复用，item移动到左方的位置必须不超过content的左边界
339. if (viewPos.x > bufferZone && item.x - offset - this.padding_left > 0) {
340. let itemRender: ItemRender = item.getComponent(ItemRender);
341. let itemIndex = itemRender.itemIndex - items.length;
342. itemRender.itemIndex = itemIndex;
343. itemRender.data = this.itemDataList[itemIndex];
344. itemRender.dataChanged();
345. item.x = item.x - offset;
346. }
347. } else {
348. //item左滑时，超出了scrollView左边界，将item移动到右方复用，item移动到右方的位置必须不超过content的右边界
349. if (viewPos.x < -bufferZone && item.x + offset + this.padding_right < this.content.width) {
350. let itemRender: ItemRender = item.getComponent(ItemRender);
351. let itemIndex = itemRender.itemIndex + items.length;
352. itemRender.itemIndex = itemIndex;
353. itemRender.data = this.itemDataList[itemIndex];
354. itemRender.dataChanged();
355. item.x = item.x + offset;
356. }
357. }
358. }
359. this.lastContentPosX = this.scrollView.content.x;
360. }
361.  
362. /**网格垂直排列 */
363. private updateGrid_V() {
364. let items = this.itemList;
365. let item: cc.Node;
366. let bufferZone = this.halfScrollView;
367. let isUp = this.scrollView.content.y > this.lastContentPosY;
368. let offset = (this.itemHeight + this.spaceY) * (this.spawnCount / this.gridCol);
369. for (let i = 0; i < items.length; i++) {
370. item = items[i];
371. let viewPos = this.getPositionInView(item);
372. if (isUp) {
373. //item上滑时，超出了scrollView上边界，将item移动到下方复用，item移动到下方的位置必须不超过content的下边界
374. if (viewPos.y > bufferZone && item.y - offset - this.padding_buttom > -this.content.height) {
375. let itemRender: ItemRender = item.getComponent(ItemRender);
376. let itemIndex = itemRender.itemIndex + (this.spawnCount / this.gridCol) * this.gridCol;
377. if (this.itemDataList[itemIndex] != null) {
378. item.y = item.y - offset;
379. itemRender.itemIndex = itemIndex;
380. itemRender.data = this.itemDataList[itemIndex];
381. itemRender.dataChanged();
382. item.opacity = 255;
383. } else {
384. item.y = item.y - offset;
385. itemRender.itemIndex = itemIndex;
386. item.opacity = 0;
387. }
388. }
389. } else {//item下滑时，超出了scrollView下边界，将item移动到上方复用，item移动到上方的位置必须不超过content的上边界
390. if (viewPos.y < -bufferZone && item.y + offset + this.padding_top < 0) {
391. let itemRender: ItemRender = item.getComponent(ItemRender);
392. let itemIndex = itemRender.itemIndex - (this.spawnCount / this.gridCol) * this.gridCol;
393. if (this.itemDataList[itemIndex] != null) {
394. item.y = item.y + offset;
395. itemRender.itemIndex = itemIndex;
396. itemRender.data = this.itemDataList[itemIndex];
397. itemRender.dataChanged();
398. item.opacity = 255;
399. } else {
400. item.y = item.y + offset;
401. itemRender.itemIndex = itemIndex;
402. item.opacity = 0;
403. }
404. }
405. }
406. }
407. this.lastContentPosY = this.scrollView.content.y;
408. }
409.  
410. /**网格水平排列 */
411. private updateGrid_H() {
412. let items = this.itemList;
413. let item;
414. let bufferZone = this.halfScrollView;
415. let isRight = this.scrollView.content.x > this.lastContentPosX;
416. let offset = (this.itemWidth + this.spaceX) * (this.spawnCount / this.gridRow);
417. for (let i = 0; i < items.length; i++) {
418. item = items[i];
419. let viewPos = this.getPositionInView(item);
420. if (isRight) {
421. //item右滑时，超出了scrollView右边界，将item移动到左方复用，item移动到左方的位置必须不超过content的左边界
422. if (viewPos.x > bufferZone && item.x - offset - this.padding_left > 0) {
423. let itemRender: ItemRender = item.getComponent(ItemRender);
424. let itemIndex = itemRender.itemIndex - (this.spawnCount / this.gridRow) * this.gridRow;
425. if (this.itemDataList[itemIndex] != null) {
426. item.x = item.x - offset;
427. itemRender.itemIndex = itemIndex;
428. itemRender.data = this.itemDataList[itemIndex];
429. itemRender.dataChanged();
430. item.opacity = 255;
431. } else {
432. item.x = item.x - offset;
433. itemRender.itemIndex = itemIndex;
434. item.opacity = 0;
435. }
436. }
437. } else {
438. //item左滑时，超出了scrollView左边界，将item移动到右方复用，item移动到右方的位置必须不超过content的右边界
439. if (viewPos.x < -bufferZone && item.x + offset + this.padding_right < this.content.width) {
440. let itemRender: ItemRender = item.getComponent(ItemRender);
441. let itemIndex = itemRender.itemIndex + (this.spawnCount / this.gridRow) * this.gridRow;
442. if (this.itemDataList[itemIndex] != null) {
443. item.x = item.x + offset;
444. itemRender.itemIndex = itemIndex;
445. itemRender.data = this.itemDataList[itemIndex];
446. itemRender.dataChanged();
447. item.opacity = 255;
448. } else {
449. item.x = item.x + offset;
450. itemRender.itemIndex = itemIndex;
451. item.opacity = 0;
452. }
453. }
454. }
455. }
456. this.lastContentPosX = this.scrollView.content.x;
457. }
458.  
459. /**获取item在scrollView的局部坐标 */
460. private getPositionInView(item) {
461. let worldPos = item.parent.convertToWorldSpaceAR(item.position);
462. let viewPos = this.scrollView.node.convertToNodeSpaceAR(worldPos);
463. return viewPos;
464. }
465.  
466. /**获取列表数据 */
467. public getListData() {
468. return this.itemDataList;
469. }
470.  
471. /**
472. * 增加一项数据到列表的末尾
473. * @param data 数据
474. */
475. public addItem(data: any) {
476. this.itemDataList.push(data);
477. this.updateContent();
478. }
479.  
480. /**
481. * 增加一项数据到列表指定位置
482. * @param index 位置，0表示第1项
483. * @param data 数据
484. */
485. public addItemAt(index: number, data: any) {
486. if (this.itemDataList[index] != null || this.itemDataList.length == index) {
487. this.itemDataList.splice(index, 1, data);
488. this.updateContent();
489. }
490. }
491.  
492. /**
493. * 删除一项数据
494. * @param index 删除项的位置 ,0表示第1项
495. */
496. public deleteItem(index: number) {
497. if (this.itemDataList[index] != null) {
498. this.itemDataList.splice(index, 1);
499. this.updateContent();
500. }
501. }
502.  
503. /**
504. * 改变一项数据
505. * @param index 位置,0表示第1项
506. * @param data 替换的数据
507. */
508. public changeItem(index: number, data: any) {
509. if (this.itemDataList[index] != null) {
510. this.itemDataList[index] = data;
511. this.updateContent();
512. }
513. }
514.  
515. /**获取第一个Item的位置 */
516. private updateContent() {
517. //显示列表实例为0个
518. if (this.itemList.length == 0) {
519. this.countListParam();
520. this.createList(0, new cc.Vec2(0, 0));
521. //显示列表的实例不为0个，则需要重新排列item实例数组
522. } else {
523. if (this.type == ListType.Vertical) {
524. this.itemList.sort((a: any, b: any) => {
525. return b.y - a.y;
526. });
527. } else if (this.type == ListType.Horizontal) {
528. this.itemList.sort((a: any, b: any) => {
529. return a.x - b.x;
530. });
531. } else if (this.type == ListType.Grid) {
532. if (this.startAxis == StartAxisType.Vertical) {
533. this.itemList.sort((a: any, b: any) => {
534. return a.x - b.x;
535. });
536. this.itemList.sort((a: any, b: any) => {
537. return b.y - a.y;
538. });
539. } else if (this.startAxis == StartAxisType.Horizontal) {
540. this.itemList.sort((a: any, b: any) => {
541. return b.y - a.y;
542. });
543. this.itemList.sort((a: any, b: any) => {
544. return a.x - b.x;
545. });
546. }
547. }
548.  
549. this.countListParam();
550.  
551. //获取第一个item实例需要显示的数据索引
552. var startIndex = this.itemList[0].getComponent(ItemRender).itemIndex;
553.  
554. if (this.type == ListType.Grid && this.startAxis == StartAxisType.Vertical) {
555. startIndex += (startIndex + this.spawnCount) % this.gridCol;
556. } else if (this.type == ListType.Grid && this.startAxis == StartAxisType.Horizontal) {
557. startIndex += (startIndex + this.spawnCount) % this.gridRow;
558. }
559.  
560. //getScrollOffset()和scrollToOffset()的x值是相反的
561. var offset: cc.Vec2 = this.scrollView.getScrollOffset();
562. offset.x = - offset.x;
563.  
564. this.createList(startIndex, offset);
565. }
566. }
567.  
568. /**销毁 */
569. public onDestroy() {
570. //清理列表项
571. let len = this.itemList.length;
572. for (let i = 0; i < len; i++) {
573. if (cc.isValid(this.itemList[i], true)) {
574. this.itemList[i].destroy();
575. }
576. }
577. this.itemList.length = 0;
578. //清理对象池
579. len = this.itemPool.length;
580. for (let i = 0; i < len; i++) {
581. if (cc.isValid(this.itemPool[i], true)) {
582. this.itemPool[i].destroy();
583. }
584. }
585. this.itemPool.length = 0;
586. //清理列表数据
587. this.itemDataList.length = 0;
588. }
589. }

以上就是如何在CocosCreator中做一个List的详细内容，更多关于CocosCreator List的资料请关注米米素材网其它相关文章！

原文链接：https://www.cnblogs.com/gamedaybyday/p/13270209.html