如何在CocosCreator中做一个List

时间:2022-03-06 00:41:01

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

如何在CocosCreator中做一个List

cocos原来的LayOut做列表,有100个数据就有100个实例(左侧图)。

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

如何在CocosCreator中做一个List

List使用方法

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

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

如何在CocosCreator中做一个List

代码中给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