cc.Class({
extends: cc.Component,
properties: {
// item:[cc.Prefab],
// itemData:[],//item數(shù)據(jù)
// scrollView:cc.ScrollView,
// itemInterval:0, //間距
// firstItemData:{},
// lastItemData:{},
// itemArr:[],
// itemNode:[],
},
//得到此腳本的節(jié)點(diǎn)下總控制腳本,用來傳遞給它的所有成員item;
setTarget(target) {
this.target = target;
},
//itemData是item數(shù)據(jù),itemPosMap是滾動(dòng)條滾動(dòng)時(shí)要用到的item位置數(shù)據(jù).
init(itemData, scrollView, item, itemInterval, scrollViewCanFix, isSkipInit) {
//前三項(xiàng)不能為空
if (!itemData||!scrollView||!item) {
return false;
}
this.itemData = itemData; //item數(shù)據(jù)
this.scrollView = scrollView;
if(item.constructor!==Array){
let arr=[];
arr.push(item);
this.item=arr;
}else{
this.item = item;
}
this.itemInterval = itemInterval || 0; //間距
this.scrollViewCanFix = scrollViewCanFix || true; //是否自動(dòng)修正
//初始化各類屬性
this.content = this.scrollView.content;
this.layerHeight = this.scrollView.node.height;
this.updateTimer = 0;
this.updateInterval = 5;
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.itemNodeHeight=[];
this.scrollView.node.on('scrolling', this.callback,this);
if (isSkipInit||itemData.length<1) {
return;
}
this.initItem();
},
//能取到指定index的位置信息,用來設(shè)置預(yù)制體的位置
getItemPos(index) {
if(this.itemData.length<1){
return 0;
}
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;
//若不存在預(yù)制體的高度,獲取得之.
if(this.itemNodeHeight[j]){
obj.endPos = obj.startPos + this.itemNodeHeight[j] + this.itemInterval;
}else{
let y;
if(i-1>=0){
y=this.itemPosMap.get(i- 1).endPos;
}else{
y=0;
}
this.addItemNode(i,-y);
obj.endPos = obj.startPos + this.itemNodeHeight[j] + this.itemInterval;
}
this.itemPosMap.set(i, obj);
}
this.updateContentHeigh(this.itemPosMap.get(this.itemData.length - 1).endPos);
},
//第一次加載的時(shí)候?qū)嵗A(yù)制體
initItem() {
//實(shí)例化所有用到的item;j控制實(shí)例化item的數(shù)目,暫定超出兩個(gè)
let j = 0;
for (let i = 0; i < this.itemData.length; i++) {
if (this.content.height > this.layerHeight) {
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);
}
},
//滾動(dòng)時(shí),當(dāng)緩存數(shù)組this.itemArr沒有相關(guān)預(yù)制體時(shí),生成一個(gè)
addItemNode(i, y) {
let pfbType = this.itemData[i].pfbType||0;
let item = this.getItemNode(pfbType);
item.parent = this.content;
item.pfbType = pfbType;
item.index = i;
if (i === 0) {
item.y = 0;
} else {
item.y = y;
}
item.x = 0;
//對(duì)item賦值
item.getComponent(cc.Component).init(this.itemData[i], this);
this.itemArr.push(item);
},
getItemNode(pfbType){
let item=cc.instantiate(this.item[pfbType]);
this.itemNodeHeight[pfbType]=item.height;
return item;
},
updateContentHeigh(num) {
this.content.height = num > this.layerHeight ? num : this.layerHeight;
//cc.log('滾動(dòng)條高度:', this.content.height);
},
//觸摸滾動(dòng)條的函數(shù)回調(diào)
callback(event, eventType) {
this.updateTimer += 1;
if (this.updateTimer < this.updateInterval) return; // we don't need to do the math every frame
this.updateTimer = 0;
//cc.log(event && event.type || eventType)
if (this.content&&this.content.height > this.layerHeight) {
let firstItemPos = this.scrollView.getScrollOffset().y;
let lastItemPos = firstItemPos + this.layerHeight;
if (firstItemPos < 0) return;
//只執(zhí)行一次的額外初始化.
if (this.initItemData) {
this.getItemPos(0);
this.initItemData = false;
this.updateFirstItemIndex(firstItemPos);
this.itemCanMoveDown = true;
this.updateLastItemIndex(lastItemPos);
this.itemCanMoveDown = false;
}
//超出邊界直接返回.
//滾動(dòng)條向上滑動(dòng)可能會(huì)觸發(fā)的函數(shù)
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;
}
}
//滾動(dòng)條向下滑動(dòng)可能會(huì)觸發(fā)的函數(shù)
if (lastItemPos < this.lastItemData.startPos) {
this.updateLastItemIndex(lastItemPos);
this.count--;
}
if (firstItemPos < this.firstItemData.startPos) {
this.itemCanMoveUp = true;
this.updateFirstItemIndex(firstItemPos);
this.itemCanMoveUp = false;
}
}
},
//頂部的預(yù)制體index改變的時(shí)候進(jìn)行預(yù)制體移動(dòng)操作.
updateFirstItemIndex() {
let num = this.firstItemIndex;
if (this.itemCanMoveUp && num > this.getItemIndex()[0] && num > 0) {
this.itemMoveUp(this.firstItemIndex - 1);
}
},
//底部的預(yù)制體index改變的時(shí)候進(jìn)行預(yù)制體移動(dòng)操作.
updateLastItemIndex() {
let num = this.lastItemIndex;
if (this.itemCanMoveDown && num < this.getItemIndex()[1] && num + 1 < this.itemData.length) {
this.itemMoveDown(this.lastItemIndex + 1);
}
},
//得到滾動(dòng)條此時(shí)狀態(tài)下應(yīng)有的itemNode元素,包括滾動(dòng)條上方一個(gè),滾動(dòng)條下方一個(gè).
getItemIndex() {
let firstItemPos = this.scrollView.getScrollOffset().y;
let lastItemPos = firstItemPos + this.layerHeight;
let arr = [];
for (let [key, value] of this.itemPosMap.entries()) {
//判斷狀態(tài)的位置關(guān)系是[);
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;
},
//firstIndex 滾動(dòng)條順序是從上到下開始遍歷
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);
},
//firstIndex 滾動(dòng)條順序是從下到上開始遍歷
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;
},
//得到要移動(dòng)的item的索引index,
//邏輯判斷,第一種情況,修改itemArr數(shù)組的某個(gè)對(duì)象,第二種情況實(shí)例化一個(gè)新itemNode
itemMove(index, y) {
for (let i = 0; i < this.itemArr.length; i++) {
//index存在-3的情況,類似于在緩存池里的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)
//如果item是展開的狀態(tài),不參與排序
if (this.itemArr[i].isOpen) {
status1 = false;
status2 = false;
}
if (status1 && status3 || status2 && status3) {
cc.log(i, index, this.itemArr, this.content.height);
//給item賦值還有設(shè)置位置
this.itemArr[i].index = index;
this.itemArr[i].y = y;
this.itemArr[i].getComponent(cc.Component).init(this.itemData[index], this);
return;
}
}
this.addItemNode(index, y);
},
//得到相關(guān)位置的排序index
getPosIndex(pos) {
for (let [key, value] of this.itemPosMap.entries()) {
if (value.endPos > pos && value.startPos <= pos) {
return key;
}
}
},
//增加一個(gè)item,類似于聊天的時(shí)候發(fā)信息.
addItem(obj) {
this.itemData.push(obj);
this.getItemPos(0);
let endPos = this.itemPosMap.get(this.itemData.length - 1).endPos;
if (endPos - this.layerHeight > 0) {
let startPos = endPos - this.layerHeight;
//得到當(dāng)前的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.content=this.scrollView.content;
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;
}
},
//清除界面上的所有item,例如清空聊天信息.
clearItem() {
this.itemData = [];
this.itemPosMap.clear();
this.scrollView.scrollToTop();
this.content.height = 0;
for (let i in this.itemArr) {
this.itemArr[i].index = -3;
this.itemArr[i].y = 5000;
}
},
//刪除某一條指定item,
deleteItem(i) {
this.itemData.splice(i, 1);
this.getItemPos(0);
//改變this.itemArr的內(nèi)容
for (let j = 0; j < this.itemArr.length; j++) {
if (this.itemArr[j].index === i) {
this.itemArr[j].index = -3;
this.itemArr[j].y = 3000;
}
if (this.itemArr[j].index > i) {
let num = this.itemArr[j].index;
this.itemArr[j].y = -this.itemPosMap.get(num - 1).startPos;
this.itemArr[j].index = num - 1;
}
}
this.itemMoveUp(this.firstItemIndex);
},
//清空所有item時(shí),把itemData的數(shù)據(jù)也全部清除.
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;
}
}
},
//適用于戰(zhàn)績展開的情況
resetItemSize(index, infoHeight) {
cc.log(infoHeight)
let func = (function (index, infoHeight) {
for (let i = 0; i < this.itemArr.length; i++) {
//排在點(diǎn)擊的node后面的itemNode下移位置.
if (this.itemArr[i].index > index) {
this.itemArr[i].y -= infoHeight;
}
//如果相等,表明itemNode已經(jīng)打開.
if (this.itemArr[i].index === index) {
if (this.itemArr[i].isOpen) {
this.itemArr[i].isOpen = false;
} else {
this.itemArr[i].isOpen = true;
}
} else {
if (this.itemArr[i].isOpen) {
this.itemArr[i].isOpen = false;
}
}
}
//修改位置map的相關(guān)數(shù)據(jù)
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 > 0 ? infoHeight : 0;
this.updateContentHeigh(this.itemPosMap.get(this.itemData.length - 1).endPos);
}).bind(this);
if (this.lastResetItemIndex !== null) {
//如果存在展開的index,判斷新點(diǎn)擊的node的index是否相同.
if (this.lastResetItemIndex === index) {
func(this.lastResetItemIndex, -this.lastResetItemInfoHeight);
this.lastResetItemIndex = null;
this.lastResetItemInfoHeight = 0;
} else {
cc.log(this.itemArr, this.itemPosMap)
if (this.lastResetItemIndex < index) {
let offset = this.scrollView.getScrollOffset();
offset.y -= this.lastResetItemInfoHeight;
this.scrollView.scrollToOffset(offset)
cc.log(offset)
}
func(this.lastResetItemIndex, -this.lastResetItemInfoHeight);
func(index, infoHeight);
this.lastResetItemIndex = index;
}
} else {
func(index, infoHeight);
this.lastResetItemIndex = index;
}
//重新獲取index,并排序
this.getItemIndex();
this.itemMoveUp(this.firstItemIndex);
},
destroyItemArr(){
this.itemArr.forEach((e)=>{
e.destroy();
})
this.itemArr=[];
this.scrollView.content.height=0;
}
});
cocos creator TableView
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- PHP訪問MySQL數(shù)據(jù)庫服務(wù)器的流程 MySQL采用的是“客戶機(jī)/服務(wù)器”體系結(jié)構(gòu)?？梢允褂肞HP腳本去處理數(shù)據(jù)...
