tableView
//使用:
_MakeList() { this.item = this.view['node_item']; this.scrollView = this.view['scr_tableView'].getComponent(cc.ScrollView); let len = GameDate.rankLen;//排行榜数据长度 let arr = []; for (let i = 0; i < len; i++) { let obj = {}; obj.labelNum = i; //这个是设置要用哪个预制体 obj.pfbType = 0;//i % 2; arr.push(obj); } let tableView = require('tableView');//tableView this.tableView = new tableView(); this.tableView.init(arr, this.scrollView, [this.item], 10, true, null, this.TableCell.bind(this)); }, TableCell(item, obj, table) { let id = obj.labelNum + 1; let lab_rank = item.getChildByName('lab_rank').getComponent(cc.Label); lab_rank.string = id; let name = rankInfo.data.name[id] || '佚名'; let lab_name = item.getChildByName('lab_name').getComponent(cc.Label); lab_name.string = name; },
组件类:
cc.Class({ extends: cc.Component, properties: { // item:[cc.Prefab], // itemData:[],//item数据 // scrollView:cc.ScrollView, // itemInterval:0, //间距 // firstItemData:{}, // lastItemData:{}, // itemArr:[], // itemNode:[], }, //得到此脚本的节点下总控制脚本,用来传递给它的所有成员item; setTarget(target) { this.target = target; }, //itemData是item数据,itemPosMap是滚动条滚动时要用到的item位置数据. //scrollView必须是组件,item必须是数组 init(itemData, scrollView, item, itemInterval, scrollViewCanFix, isSkipInit, TableCell) { if (!arguments[0]) { return false; } this.itemData = itemData; //item数据 this.scrollView = scrollView; this.item = item; this.itemInterval = itemInterval || 0; //间距 this.scrollViewCanFix = scrollViewCanFix || true; //是否自动修正 //初始化各类属性 this.content = this.scrollView.content; this.layerHeight = this.scrollView.node.height; this.firstItemIndex = 0; this.lastItemIndex = 0; this.firstItemData = {}; this.lastItemData = {}; this.itemArr = []; this.itemNode = []; this.itemPosMap = new Map(); this.initItemData = true; this.count = 0; this.TableCell = TableCell; if (isSkipInit) { return; } for (let i = 0; i < this.item.length; i++) { this.itemNode[i] = cc.instantiate(this.item[i]); } cc.log(this.testTime(0)); this.initItem(); this.getItemPos(0); this.scrollView.node.on('scrolling', this.callback, this); cc.log('tableView结束:' + this.testTime()); }, getItemPos(index) { for (let i = index; i < this.itemData.length; i++) { let obj = {} let y; if (i === 0) { obj.startPos = 0; } else { obj.startPos = this.itemPosMap.get(i - 1).endPos; } let j = this.itemData[i].pfbType || 0; obj.endPos = obj.startPos + this.itemNode[j].height + this.itemInterval; this.itemPosMap.set(i, obj); } this.updateContentHeigh(this.itemPosMap.get(this.itemData.length - 1).endPos); }, initItem() { //实例化所有用到的item;j控制实例化item的数目,暂定超出两个 let j = 0; for (let i = 0; i < this.itemData.length; i++) { if (this.content.height > this.layerHeight) { j++ if (j > 2) { break; } } let y; if (i === 0) { y = 0; } else { y = this.itemArr[i - 1].y - this.itemArr[i - 1].height - this.itemInterval; } this.addItemNode(i, y); this.updateContentHeigh(this.itemArr[i].height - y); } }, addItemNode(i, y) { let pfbType = this.itemData[i].pfbType || 0; let item = cc.instantiate(this.itemNode[pfbType]); item.parent = this.content; item.pfbType = pfbType; item.index = i; if (i === 0) { item.y = 0; } else { item.y = y; } item.x = 0; //对item赋值 // item.getComponent(cc.Component).init(this.itemData[i], this); this.TableCell && this.TableCell(item, this.itemData[i], this); this.itemArr.push(item); // cc.log('生成itemNode' + i); }, updateContentHeigh(num) { this.content.height = num > this.layerHeight ? num : this.layerHeight; //cc.log('滚动条高度:', this.content.height); }, //触摸滚动条的函数回调 //第一,滚动条 callback(event, eventType) { // cc.log(event && event.type || eventType) if (this.content.height > this.layerHeight) { let firstItemPos = this.scrollView.getScrollOffset().y; let lastItemPos = firstItemPos + this.layerHeight; if (firstItemPos < 0) return; if (this.initItemData) { this.initItemData = false; this.updateFirstItemIndex(firstItemPos); this.itemCanMoveDown = true; this.updateLastItemIndex(lastItemPos); this.itemCanMoveDown = false; } //超出边界直接返回. //滚动条向上滑动可能会触发的函数 if (firstItemPos > this.firstItemData.endPos) { if (this.lastItemIndex + 1 < this.itemData.length) { this.updateFirstItemIndex(firstItemPos); } this.count++; } if (lastItemPos > this.lastItemData.endPos) { if (this.lastItemIndex + 1 < this.itemData.length) { this.itemCanMoveDown = true; this.updateLastItemIndex(lastItemPos); this.itemCanMoveDown = false; } } //滚动条向下滑动可能会触发的函数 if (lastItemPos < this.lastItemData.startPos) { this.updateLastItemIndex(lastItemPos); this.count--; } if (firstItemPos < this.firstItemData.startPos) { this.itemCanMoveUp = true; this.updateFirstItemIndex(firstItemPos); this.itemCanMoveUp = false; } } }, updateFirstItemIndex() { let num = this.firstItemIndex; if (this.itemCanMoveUp && num > this.getItemIndex()[0] && num > 0) { this.itemMoveUp(this.firstItemIndex - 1); } this.updateItemIndex(); }, updateLastItemIndex() { let num = this.lastItemIndex; if (this.itemCanMoveDown && num < this.getItemIndex()[1] && num + 1 < this.itemData.length) { this.itemMoveDown(this.lastItemIndex + 1); } this.updateItemIndex(); }, testTime(time) { let t = new Date().getTime() this.lastTestTime = this.lastTestTime || t; let timestamp = new Date().getTime() - this.lastTestTime; return timestamp }, updateItemIndex() { //cc.log(this.firstItemIndex, this.lastItemIndex, this.itemArr, this.itemData) }, //得到滚动条此时状态下应有的itemNode元素,包括滚动条上方一个,滚动条下方一个. getItemIndex() { // return (function () { let firstItemPos = this.scrollView.getScrollOffset().y; let lastItemPos = firstItemPos + this.layerHeight; let arr = []; for (let [key, value] of this.itemPosMap.entries()) { //判断状态的位置关系是[); let status1 = value.startPos <= firstItemPos && value.endPos > firstItemPos; let status2 = value.startPos >= firstItemPos && value.endPos < lastItemPos; let status3 = value.startPos <= lastItemPos && value.endPos > lastItemPos; if (status1) { this.firstItemData.startPos = value.startPos; this.firstItemData.endPos = value.endPos; this.firstItemIndex = key; arr.push(key); } if (status3) { this.lastItemData.startPos = value.startPos; this.lastItemData.endPos = value.endPos; this.lastItemIndex = key; arr.push(key); } } return arr; // }).bind(this); }, //firstIndex 滚动条顺序是从上到下开始遍历 itemMoveUp(num) { if (num < 0 || this.lastItemIndex + 1 < num || num + 1 > this.itemData.length) { return; } if (!this.hasItem(num)) { this.itemMove(num, -this.itemPosMap.get(num).startPos); } num++; return this.itemMoveUp(num); }, itemMoveDown(num) { if (num < 0 || this.firstItemIndex - 1 > num || num + 1 > this.itemData.length) { return; } if (!this.hasItem(num)) { this.itemMove(num, -this.itemPosMap.get(num).startPos); } num--; return this.itemMoveDown(num); }, //判断指定index位置是否存在itemNode. hasItem(index) { for (let i = 0; i < this.itemArr.length; i++) { if (this.itemArr[i].index === index) { return true; } } return false; }, //得到要移动的item的索引index, //逻辑判断,第一种情况,修改itemArr数组的某个对象,第二种情况实例化一个新itemNode itemMove(index, y) { for (let i = 0; i < this.itemArr.length; i++) { //index存在-1的情况,类似于在缓存池里的item. let status1 = this.itemArr[i].index < this.firstItemIndex - 1 ? true : false; let status2 = this.itemArr[i].index > this.lastItemIndex + 1 ? true : false; let status3 = this.itemArr[i].pfbType === this.itemData[index].pfbType; //cc.log('item的索引', this.firstItemIndex, this.lastItemIndex) if (status1 && status3 || status2 && status3) { //cc.log(i, index, this.itemArr, this.content.height); //给item赋值还有设置位置 this.itemArr[i].index = index; this.itemArr[i].y = y; // this.itemArr[i].getComponent(cc.Component).init(this.itemData[index], this); this.TableCell && this.TableCell(this.itemArr[i], this.itemData[index], this); return; } } this.addItemNode(index, y); }, //得到相关位置的排序index getPosIndex(pos) { for (let [key, value] of this.itemPosMap.entries()) { if (value.endPos > pos && value.startPos <= pos) { return key; } } }, addItem(obj) { this.itemData.push(obj); this.getItemPos(this.itemData.length - 1); let endPos = this.itemPosMap.get(this.itemData.length - 1).endPos; if (endPos - this.layerHeight > 0) { let startPos = endPos - this.layerHeight; //得到当前的firstItemIndex; for (let i = this.itemData.length - 1; i >= 0; i--) { if (this.itemPosMap.get(i).endPos > startPos && this.itemPosMap.get(i).startPos <= startPos) { this.firstItemIndex = i; } } this.scrollView.scrollToBottom(); this.lastItemIndex = this.itemData.length - 1; let num = this.firstItemIndex - 1 > 0 ? (this.firstItemIndex - 1) : 0; this.itemMoveUp(num); return true; } else { this.firstItemIndex = 0; this.lastItemIndex = this.itemData.length - 1; this.itemMoveUp(this.firstItemIndex); return false; } }, clearItem() { this.itemData = []; this.itemPosMap.clear(); this.scrollView.scrollToTop(); this.content.height = 0; for (let i in this.itemArr) { this.itemArr[i].index = -1; this.itemArr[i].y = 3000; } }, deleteItem(i) { this.itemData.splice(i, 1); this.getItemPos(this.itemData.length - 1); //改变this.itemArr的内容 for (let j = 0; j < this.itemArr.length; j++) { if (this.itemArr[j].index === i) { this.itemArr[j].index = -1; this.itemArr[j].y = 3000; } if (this.itemArr[j].index > i) { let num = this.itemArr[j].index; // //cc.log(j,this.itemArr[j].index) this.itemArr[j].y = -this.itemPosMap.get(num - 1).startPos; this.itemArr[j].index = num - 1; //cc.log(this.itemArr[j].index, this.itemArr[j].y) } } this.updateContentHeigh(this.itemPosMap.get(this.itemData.length - 1).endPos); this.itemMoveUp(this.firstItemIndex); }, resetItemData(index) { for (let i = 0; i < this.itemArr.length; i++) { if (this.itemArr[i].index === index) { let js = this.itemArr[i].getComponent(cc.Component); js.init(this.itemData[index], this); break; } } }, resetItemSize(index, infoHeight) { let func = (function (index, infoHeight) { for (let i = 0; i < this.itemArr.length; i++) { if (this.itemArr[i].index > index) { this.itemArr[i].y -= infoHeight; } } for (let [key, value] of this.itemPosMap.entries()) { if (key === index) { value.endPos += infoHeight; } if (key > index) { value.endPos += infoHeight; value.startPos += infoHeight; } } this.lastResetItemInfoHeight = infoHeight; this.lastResetItemIndex = index; }).bind(this); if (this.lastResetItemIndex !== null && this.lastResetItemInfoHeight) { if (this.lastResetItemIndex === index) { func(this.lastResetItemIndex, -this.lastResetItemInfoHeight); this.lastResetItemIndex = null; this.lastResetItemInfoHeight = 0; } else { func(this.lastResetItemIndex, -this.lastResetItemInfoHeight); func(index, infoHeight); } } else { func(index, infoHeight); } this.itemMoveUp(this.firstItemIndex); this.updateContentHeigh(this.itemPosMap.get(this.itemData.length - 1).endPos); }, });
欢迎转载,请注明出处!