CocosCreator版本：2.3.4

cocos沒(méi)有List組件，所以要自己寫。從cocos的example項(xiàng)目中找到assets/case/02_ui/05_listView的demo來(lái)改造。

自寫一個(gè)虛擬列表，有垂直布局，水平布局，網(wǎng)格布局和Padding的List

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

cocos原來(lái)的LayOut做列表，有100個(gè)數(shù)據(jù)就有100個(gè)實(shí)例（左側(cè)圖）。

而虛擬列表則只有你看見(jiàn)的實(shí)例存在，當(dāng)滑動(dòng)時(shí)會(huì)循環(huán)使用。（右側(cè)圖）

List使用方法

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

List的item列表項(xiàng)直接放在content下，并賦值給List組件，item需要添加繼承自ItemRender的對(duì)象，用于數(shù)據(jù)刷新。

代碼中給List設(shè)置數(shù)據(jù)

1. //設(shè)置排行榜數(shù)據(jù)
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. /**網(wǎng)格排列 */
19. Grid = 3
20. }
21.  
22. /**網(wǎng)格布局中的方向 */
23. export enum StartAxisType {
24. /**水平排列 */
25. Horizontal = 1,
26. /**垂直排列 */
27. Vertical = 2,
28. }
29.  
30. /**
31. * 列表
32. * 根據(jù)cocos_example的listView改動(dòng)而來(lái)
33. * @author chenkai 2020.7.8
34. * @example
35. * 1.創(chuàng)建cocos的ScrollView組件，添加List，設(shè)置List屬性即可
36. *
37. */
38. @ccclass
39. export default class List extends cc.Component {
40.  
41. //==================== 屬性面板 =========================
42. /**列表選項(xiàng) */
43. @property({ type: cc.Node, tooltip: "列表項(xiàng)" })
44. public itemRender: cc.Node = null;
45.  
46. /**排列方式 */
47. @property({ type: cc.Enum(ListType), tooltip: "排列方式" })
48. public type: ListType = ListType.Vertical;
49.  
50. /**網(wǎng)格布局中的方向 */
51. @property({ type: cc.Enum(StartAxisType), tooltip: "網(wǎng)格布局中的方向", visible() { return this.type == ListType.Grid } })
52. public startAxis: StartAxisType = StartAxisType.Horizontal;
53.  
54. /**列表項(xiàng)之間X間隔 */
55. @property({ type: cc.Integer, tooltip: "列表項(xiàng)X間隔", visible() { return (this.type == ListType.Horizontal || this.type == ListType.Grid) } })
56. public spaceX: number = 0;
57.  
58. /**列表項(xiàng)之間Y間隔 */
59. @property({ type: cc.Integer, tooltip: "列表項(xiàng)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. //====================== 滾動(dòng)容器 ===============================
82. /**列表滾動(dòng)容器 */
83. public scrollView: cc.ScrollView = null;
84. /**scrollView的內(nèi)容容器 */
85. private content: cc.Node = null;
86.  
87. //======================== 列表項(xiàng) ===========================
88. /**列表項(xiàng)數(shù)據(jù) */
89. private itemDataList: Array<any> = [];
90. /**應(yīng)創(chuàng)建的實(shí)例數(shù)量 */
91. private spawnCount: number = 0;
92. /**存放列表項(xiàng)實(shí)例的數(shù)組 */
93. private itemList: Array<cc.Node> = [];
94. /**item的高度 */
95. private itemHeight: number = 0;
96. /**item的寬度 */
97. private itemWidth: number = 0;
98. /**存放不再使用中的列表項(xiàng) */
99. private itemPool: Array<cc.Node> = [];
100.  
101. //======================= 計(jì)算參數(shù) ==========================
102. /**距離scrollView中心點(diǎn)的距離，超過(guò)這個(gè)距離的item會(huì)被重置，一般設(shè)置為 scrollVIew.height/2 + item.heigt/2 + space，因?yàn)檫@個(gè)距離item正好超出scrollView顯示范圍 */
103. private halfScrollView: number = 0;
104. /**上一次content的X值，用于和現(xiàn)在content的X值比較，得出是向左還是向右滾動(dòng) */
105. private lastContentPosX: number = 0;
106. /**上一次content的Y值，用于和現(xiàn)在content的Y值比較，得出是向上還是向下滾動(dòng) */
107. private lastContentPosY: number = 0;
108. /**網(wǎng)格行數(shù) */
109. private gridRow: number = 0;
110. /**網(wǎng)格列數(shù) */
111. private gridCol: number = 0;
112. /**刷新時(shí)間，單位s */
113. private updateTimer: number = 0;
114. /**刷新間隔，單位s */
115. private updateInterval: number = 0.1;
116. /**是否滾動(dòng)容器 */
117. private bScrolling: boolean = false;
118. /**刷新的函數(shù) */
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. * 列表數(shù)據(jù) (列表數(shù)據(jù)復(fù)制使用，如果列表數(shù)據(jù)改變，則需要重新設(shè)置一遍數(shù)據(jù))
134. * @param itemDataList item數(shù)據(jù)列表
135. */
136. public setData(itemDataList: Array<any>) {
137. this.itemDataList = itemDataList.slice();
138. this.updateContent();
139. }
140.  
141. /**計(jì)算列表的各項(xiàng)參數(shù) */
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; //計(jì)算創(chuàng)建的item實(shí)例數(shù)量，比當(dāng)前scrollView容器能放下的item數(shù)量再加上2個(gè)
150. this.halfScrollView = this.scrollView.node.height / 2 + this.itemHeight / 2 + this.spaceY; //計(jì)算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間隔過(guò)大，導(dǎo)致放不下一個(gè)item，則left和right都設(shè)置為0，相當(dāng)于不生效
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過(guò)大");
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. //計(jì)算高間隔
182. this.content.height = this.content.parent.height;
183. //如果left和right間隔過(guò)大，導(dǎo)致放不下一個(gè)item，則left和right都設(shè)置為0，相當(dāng)于不生效
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過(guò)大");
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. * 創(chuàng)建列表
202. * @param startIndex 起始顯示的數(shù)據(jù)索引 0表示第一項(xiàng)
203. * @param offset scrollView偏移量
204. */
205. private createList(startIndex: number, offset: cc.Vec2) {
206. //當(dāng)需要顯示的數(shù)據(jù)長(zhǎng)度 > 虛擬列表長(zhǎng)度， 刪除最末尾幾個(gè)數(shù)據(jù)時(shí)，列表需要重置位置到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. //當(dāng)需要顯示的數(shù)據(jù)長(zhǎng)度 <= 虛擬列表長(zhǎng)度， 隱藏多余的虛擬列表項(xiàng)
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. //需要顯示的數(shù)據(jù)索引在數(shù)據(jù)范圍內(nèi)，則item實(shí)例顯示出來(lái)
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. //需要顯示的數(shù)據(jù)索引超過(guò)了數(shù)據(jù)范圍，則item實(shí)例隱藏起來(lái)
228. } else {
229. //item實(shí)例數(shù)量 > 需要顯示的數(shù)據(jù)量
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. //因?yàn)閏ontent的錨點(diǎn)X是0，所以item的x值是content.with/2表示居中，錨點(diǎn)Y是1，所以item的y值從content頂部向下是0到負(fù)無(wú)窮。所以item.y= -item.height/2時(shí)，是在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. /**獲取一個(gè)列表項(xiàng) */
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上滑時(shí)，超出了scrollView上邊界，將item移動(dòng)到下方復(fù)用，item移動(dòng)到下方的位置必須不超過(guò)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下滑時(shí)，超出了scrollView下邊界，將item移動(dòng)到上方復(fù)用，item移動(dòng)到上方的位置必須不超過(guò)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右滑時(shí)，超出了scrollView右邊界，將item移動(dòng)到左方復(fù)用，item移動(dòng)到左方的位置必須不超過(guò)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左滑時(shí)，超出了scrollView左邊界，將item移動(dòng)到右方復(fù)用，item移動(dòng)到右方的位置必須不超過(guò)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. /**網(wǎng)格垂直排列 */
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上滑時(shí)，超出了scrollView上邊界，將item移動(dòng)到下方復(fù)用，item移動(dòng)到下方的位置必須不超過(guò)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下滑時(shí)，超出了scrollView下邊界，將item移動(dòng)到上方復(fù)用，item移動(dòng)到上方的位置必須不超過(guò)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. /**網(wǎng)格水平排列 */
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右滑時(shí)，超出了scrollView右邊界，將item移動(dòng)到左方復(fù)用，item移動(dòng)到左方的位置必須不超過(guò)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左滑時(shí)，超出了scrollView左邊界，將item移動(dòng)到右方復(fù)用，item移動(dòng)到右方的位置必須不超過(guò)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的局部坐標(biāo) */
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. /**獲取列表數(shù)據(jù) */
467. public getListData() {
468. return this.itemDataList;
469. }
470.  
471. /**
472. * 增加一項(xiàng)數(shù)據(jù)到列表的末尾
473. * @param data 數(shù)據(jù)
474. */
475. public addItem(data: any) {
476. this.itemDataList.push(data);
477. this.updateContent();
478. }
479.  
480. /**
481. * 增加一項(xiàng)數(shù)據(jù)到列表指定位置
482. * @param index 位置，0表示第1項(xiàng)
483. * @param data 數(shù)據(jù)
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. * 刪除一項(xiàng)數(shù)據(jù)
494. * @param index 刪除項(xiàng)的位置 ,0表示第1項(xiàng)
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. * 改變一項(xiàng)數(shù)據(jù)
505. * @param index 位置,0表示第1項(xiàng)
506. * @param data 替換的數(shù)據(jù)
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. /**獲取第一個(gè)Item的位置 */
516. private updateContent() {
517. //顯示列表實(shí)例為0個(gè)
518. if (this.itemList.length == 0) {
519. this.countListParam();
520. this.createList(0, new cc.Vec2(0, 0));
521. //顯示列表的實(shí)例不為0個(gè)，則需要重新排列item實(shí)例數(shù)組
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. //獲取第一個(gè)item實(shí)例需要顯示的數(shù)據(jù)索引
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. //清理列表項(xiàng)
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. //清理對(duì)象池
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. //清理列表數(shù)據(jù)
587. this.itemDataList.length = 0;
588. }
589. }

以上就是如何在CocosCreator中做一個(gè)List的詳細(xì)內(nèi)容，更多關(guān)于CocosCreator List的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！

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