cocos Creator里的scrollView下的content里生成非常多的iteam方案
const ScrollViewLayout = require("scrollViewLayout");
cc.Class({
extends: cc.Component,
properties: {
scrollView: cc.Node,
itemPrefab: cc.Prefab,
compName: "",
scrollViewLayout: ScrollViewLayout,
initItemPoolSize: 10,
debug: false,
_Horizontal: false,
_Vertical: false,
},
onLoad() {
this.init();
},
//初始化
init() {
this.scrView = this.scrollView.getComponent(cc.ScrollView);
this._Horizontal = this.scrView.horizontal;
this._Vertical = this.scrView.vertical;
this.content = this.scrView.content;
this.height = this.scrView.node.height;
this.width = this.scrView.node.width;
this.itemPool = new cc.NodePool(this.compName);
for (let i = 0; i < this.initItemPoolSize; ++i) {
let item = cc.instantiate(this.itemPrefab);
this.itemPool.put(item);
}
this.itemPrefab.data.active = false;
this.itemPrefab.data._activeInHierarchy = true;
this.args = [];
//scrollView监听事件
this.scrollView.on(cc.Node.EventType.TOUCH_MOVE, this.on_scrolling, this);
},
//滑动中回调
on_scrolling() {
if (!this.items || !this.items.length) {
return;
}
//垂直滚动
if (this._Vertical) {
let posy = this.content.y - this.height / 2;
if (posy < 0) {
posy = 0;
}
if (posy > this.content.height - this.height) {
posy = this.content.height - this.height;
}
let start = 0;
let stop = this.items.length - 1;
let viewport_start = -posy;
let viewport_stop = viewport_start - this.height;
while (this.items[start].position.y - this.items[start].height > viewport_start) {
start++;
}
while (this.items[stop].position.y < viewport_stop) {
stop--;
}
if (start != this.start_index && stop != this.stop_index) {
// this.start_index = start - 2;
this.start_index = start;
if (this.start_index < 0) this.start_index = 0;
this.stop_index = stop;
this.render_items();
}
}
if (this._Horizontal) { //水平滚动
let posx = this.content.x;
if (posx > 0) {
posx = 0;
}
if (posx < this.width - this.content.width) {
posx = this.width - this.content.width;
}
let start = 0;
let stop = this.items.length - 1;
let viewport_start = -posx;
let viewport_stop = viewport_start + this.width;
while (this.items[start].position.x + this.items[start].width < viewport_start) {
start++;
}
while (this.items[stop].position.x > viewport_stop) {
stop--;
}
if (start != this.start_index && stop != this.stop_index) {
this.start_index = start;
this.stop_index = stop;
this.render_items();
}
}
this.debugFun();
},
//生成node
spawn_node() {
let node = null;
if (this.itemPool.size() > 0) {
node = this.itemPool.get();
} else {
node = cc.instantiate(this.itemPrefab);
node.active = true;
}
node.parent = this.content;
return node;
},
//回收item
recycle_item(item) {
if (!this.itemPool) {
this.itemPool = new cc.NodePool();
}
this.itemPool.put(item.node);
item.node = null;
},
//清除items
clear_items() {
if (this.items) {
this.items.forEach((item) => {
this.recycle_item(item);
});
}
},
//渲染items
render_items() {
let item;
for (let i = 0; i < this.start_index; i++) {
item = this.items[i];
if (item.node) {
this.recycle_item(item);
}
}
for (let i = this.items.length - 1; i > this.stop_index; i--) {
item = this.items[i];
if (item.node) {
this.recycle_item(item);
}
}
for (let i = this.start_index; i <= this.stop_index + 1; i++) {
if (!this.items[i]) {
return
}
item = this.items[i];
if (!item.node) {
item.node = this.spawn_node();
this.item_setter(item.node, item.data);
}
item.node.position = item.position;
}
},
//赋值item 给item加上node和数据
pack_item(data) {
let item = {
position: null,
width: this.itemPrefab.data.width,
height: this.itemPrefab.data.height,
data: data,
node: null
};
this.recycle_item(item);
return item;
},
//item具体赋值
item_setter(node, data) {
node.getComponent(this.compName).initData(data, this.args);
},
getList: function() {
return this.list;
},
//设置数据
set_data(datas, args) {
this.clear_items();
this.list = datas;
this.items = [];
this.args = cc.isValid(args) ? args : [];
let children = [];
datas.forEach((data, i, arr) => {
let item = this.pack_item(data);
this.items[i] = item;
children.push(this.itemPrefab.data);
});
// this.layout_items(0);
// this.resize_content();
this.scrollViewLayout.layout_items(children);
this.items.forEach(function(obj, i, arr) {
obj.position = children[i];
});
this.start_index = -1;
this.stop_index = -1;
if (this._Vertical) {
this.content.y = this.height / 2;
}
if (this._Horizontal) {
this.content.x = 0;
}
if (this.items.length > 0) {
this.on_scrolling();
}
this.debugFun();
},
//销毁
destroy_items() {
this.list = [];
this.clear_items();
this.itemPool.clear();
this.items = null;
if (cc.isValid(this.scrollview)) {
this.scrollview.off("scrolling", this.on_scrolling, this);
// this.scrollview.node.off("scroll-to-bottom", this.on_scroll_to_end, this);
// this.scrollview.node.off("scroll-to-right", this.on_scroll_to_end, this);
}
},
debugFun: function() {
if (!this.debug) {
return;
}
cc.log("------------------------------------------------------------------------");
cc.log(cc.js.formatStr("this.content.y:%d this.content.anchorY:%d", this.content.y, this.content.anchorY));
cc.log(cc.js.formatStr("this.content.x:%d this.content.anchorX:%d", this.content.x, this.content.anchorX));
cc.log(cc.js.formatStr("this.itemPool.size():%d this.content.childrenCount:%d", this.itemPool.size(), this.content.childrenCount));
cc.log(cc.js.formatStr("this.start_index:%d this.stop_index:%d", this.start_index, this.stop_index));
},
});
1 /** 2 * !#en Enum for Layout type 3 * !#zh 布局类型 4 * @enum Layout.Type 5 */ 6 const Type = cc.Enum({ 7 /** 8 * !#en None Layout 9 * !#zh 取消布局 10 *@property {Number} NONE 11 */ 12 NONE: 0, 13 /** 14 * !#en Horizontal Layout 15 * !#zh 水平布局 16 * @property {Number} HORIZONTAL 17 */ 18 HORIZONTAL: 1, 19 20 /** 21 * !#en Vertical Layout 22 * !#zh 垂直布局 23 * @property {Number} VERTICAL 24 */ 25 VERTICAL: 2, 26 /** 27 * !#en Grid Layout 28 * !#zh 网格布局 29 * @property {Number} GRID 30 */ 31 GRID: 3, 32 }); 33 34 /** 35 * !#en Enum for Layout Resize Mode 36 * !#zh 缩放模式 37 * @enum Layout.ResizeMode 38 */ 39 const ResizeMode = cc.Enum({ 40 /** 41 * !#en Don't do any scale. 42 * !#zh 不做任何缩放 43 * @property {Number} NONE 44 */ 45 NONE: 0, 46 /** 47 * !#en The container size will be expanded with its children's size. 48 * !#zh 容器的大小会根据子节点的大小自动缩放。 49 * @property {Number} CONTAINER 50 */ 51 CONTAINER: 1, 52 /** 53 * !#en Child item size will be adjusted with the container's size. 54 * !#zh 子节点的大小会随着容器的大小自动缩放。 55 * @property {Number} CHILDREN 56 */ 57 CHILDREN: 2 58 }); 59 60 /** 61 * !#en Enum for Grid Layout start axis direction. 62 * The items in grid layout will be arranged in each axis at first.; 63 * !#zh 布局轴向，只用于 GRID 布局。 64 * @enum Layout.AxisDirection 65 */ 66 const AxisDirection = cc.Enum({ 67 /** 68 * !#en The horizontal axis. 69 * !#zh 进行水平方向布局 70 * @property {Number} HORIZONTAL 71 */ 72 HORIZONTAL: 0, 73 /** 74 * !#en The vertical axis. 75 * !#zh 进行垂直方向布局 76 * @property {Number} VERTICAL 77 */ 78 VERTICAL: 1, 79 }); 80 81 /** 82 * !#en Enum for vertical layout direction. 83 * Used in Grid Layout together with AxisDirection is VERTICAL 84 * !#zh 垂直方向布局方式 85 * @enum Layout.VerticalDirection 86 */ 87 const VerticalDirection = cc.Enum({ 88 /** 89 * !#en Items arranged from bottom to top. 90 * !#zh 从下到上排列 91 * @property {Number} BOTTOM_TO_TOP 92 */ 93 BOTTOM_TO_TOP: 0, 94 /** 95 * !#en Items arranged from top to bottom. 96 * !#zh 从上到下排列 97 * @property {Number} TOP_TO_BOTTOM 98 */ 99 TOP_TO_BOTTOM: 1, 100 }); 101 102 /** 103 * !#en Enum for horizontal layout direction. 104 * Used in Grid Layout together with AxisDirection is HORIZONTAL 105 * !#zh 水平方向布局方式 106 * @enum Layout.HorizontalDirection 107 */ 108 const HorizontalDirection = cc.Enum({ 109 /** 110 * !#en Items arranged from left to right. 111 * !#zh 从左往右排列 112 * @property {Number} LEFT_TO_RIGHT 113 */ 114 LEFT_TO_RIGHT: 0, 115 /** 116 * !#en Items arranged from right to left. 117 * !#zh 从右往左排列 118 *@property {Number} RIGHT_TO_LEFT 119 */ 120 RIGHT_TO_LEFT: 1, 121 }); 122 123 124 cc.Class({ 125 extends: cc.Layout, 126 127 properties: { 128 129 }, 130 131 // use this for initialization 132 133 onLoad: function() {}, 134 layout_items: function(list) { 135 this.enabled = true; 136 this._datas = list; 137 this.node.targetOff(this); 138 this._doLayout(); 139 this.enabled = false; 140 return this._datas; 141 }, 142 _doLayout: function() { 143 if (this.type === Type.HORIZONTAL) { 144 let list = this._datas || this.node.children; 145 var newWidth = this._getHorizontalBaseWidth(list); 146 147 var fnPositionY = function(child) { 148 return child.y; 149 }; 150 151 this._doLayoutHorizontally(newWidth, false, fnPositionY, true); 152 153 this.node.width = newWidth; 154 } else if (this.type === Type.VERTICAL) { 155 let list = this._datas || this.node.children; 156 var newHeight = this._getVerticalBaseHeight(list); 157 158 var fnPositionX = function(child) { 159 return child.x; 160 }; 161 162 this._doLayoutVertically(newHeight, false, fnPositionX, true); 163 164 this.node.height = newHeight; 165 } else if (this.type === Type.NONE) { 166 if (this.resizeMode === ResizeMode.CONTAINER) { 167 this._doLayoutBasic(); 168 } 169 } else if (this.type === Type.GRID) { 170 this._doLayoutGrid(); 171 } 172 }, 173 _doLayoutHorizontally: function(baseWidth, rowBreak, fnPositionY, applyChildren) { 174 var layoutAnchor = this.node.getAnchorPoint(); 175 var children = this._datas || this.node.children; 176 177 var sign = 1; 178 var paddingX = this.paddingLeft; 179 var leftBoundaryOfLayout = -layoutAnchor.x * baseWidth; 180 if (this.horizontalDirection === HorizontalDirection.RIGHT_TO_LEFT) { 181 sign = -1; 182 leftBoundaryOfLayout = (1 - layoutAnchor.x) * baseWidth; 183 paddingX = this.paddingRight; 184 } 185 186 var nextX = leftBoundaryOfLayout + sign * paddingX - sign * this.spacingX; 187 var rowMaxHeight = 0; 188 var tempMaxHeight = 0; 189 var secondMaxHeight = 0; 190 var row = 0; 191 var containerResizeBoundary = 0; 192 193 var maxHeightChildAnchorY = 0; 194 195 var newChildWidth = this.cellSize.width; 196 if (this.type !== Type.GRID && this.resizeMode === ResizeMode.CHILDREN) { 197 newChildWidth = (baseWidth - (this.paddingLeft + this.paddingRight) - (children.length - 1) * this.spacingX) / children.length; 198 } 199 200 children.forEach(function(child, i, arr) { 201 if (!child.activeInHierarchy) { 202 return; 203 } 204 //for resizing children 205 if (this._resize === ResizeMode.CHILDREN) { 206 child.width = newChildWidth; 207 if (this.type === Type.GRID) { 208 child.height = this.cellSize.height; 209 } 210 } 211 212 var anchorX = child.anchorX; 213 214 if (secondMaxHeight > tempMaxHeight) { 215 tempMaxHeight = secondMaxHeight; 216 } 217 218 if (child.height >= tempMaxHeight) { 219 secondMaxHeight = tempMaxHeight; 220 tempMaxHeight = child.height; 221 maxHeightChildAnchorY = child.getAnchorPoint().y; 222 } 223 224 if (this.horizontalDirection === HorizontalDirection.RIGHT_TO_LEFT) { 225 anchorX = 1 - child.anchorX; 226 } 227 nextX = nextX + sign * anchorX * child.width + sign * this.spacingX; 228 var rightBoundaryOfChild = sign * (1 - anchorX) * child.width; 229 230 if (rowBreak) { 231 var rowBreakBoundary = nextX + rightBoundaryOfChild + sign * (sign > 0 ? this.paddingRight : this.paddingLeft); 232 var leftToRightRowBreak = this.horizontalDirection === HorizontalDirection.LEFT_TO_RIGHT && rowBreakBoundary > (1 - layoutAnchor.x) * baseWidth; 233 var rightToLeftRowBreak = this.horizontalDirection === HorizontalDirection.RIGHT_TO_LEFT && rowBreakBoundary < -layoutAnchor.x * baseWidth; 234 235 if (leftToRightRowBreak || rightToLeftRowBreak) { 236 237 if (child.height >= tempMaxHeight) { 238 if (secondMaxHeight === 0) { 239 secondMaxHeight = tempMaxHeight; 240 } 241 rowMaxHeight += secondMaxHeight; 242 secondMaxHeight = tempMaxHeight; 243 } else { 244 rowMaxHeight += tempMaxHeight; 245 secondMaxHeight = child.height; 246 tempMaxHeight = 0; 247 } 248 nextX = leftBoundaryOfLayout + sign * (paddingX + anchorX * child.width); 249 row++; 250 } 251 } 252 253 var finalPositionY = fnPositionY(child, rowMaxHeight, row); 254 if (baseWidth >= (child.width + this.paddingLeft + this.paddingRight)) { 255 if (applyChildren) { 256 child.setPosition(cc.p(nextX, finalPositionY)); 257 } 258 } 259 260 var signX = 1; 261 var tempFinalPositionY; 262 var topMarign = (tempMaxHeight === 0) ? child.height : tempMaxHeight; 263 264 if (this.verticalDirection === VerticalDirection.TOP_TO_BOTTOM) { 265 containerResizeBoundary = containerResizeBoundary || this.node._contentSize.height; 266 signX = -1; 267 tempFinalPositionY = finalPositionY + signX * (topMarign * maxHeightChildAnchorY + this.paddingBottom); 268 if (tempFinalPositionY < containerResizeBoundary) { 269 containerResizeBoundary = tempFinalPositionY; 270 } 271 } else { 272 containerResizeBoundary = containerResizeBoundary || -this.node._contentSize.height; 273 tempFinalPositionY = finalPositionY + signX * (topMarign * maxHeightChildAnchorY + this.paddingTop); 274 if (tempFinalPositionY > containerResizeBoundary) { 275 containerResizeBoundary = tempFinalPositionY; 276 } 277 } 278 279 nextX += rightBoundaryOfChild; 280 if (this._datas) this._datas[i] = child.position; 281 }.bind(this)); 282 283 return containerResizeBoundary; 284 }, 285 _doLayoutVertically: function(baseHeight, columnBreak, fnPositionX, applyChildren) { 286 var layoutAnchor = this.node.getAnchorPoint(); 287 var children = this._datas || this.node.children; 288 289 var sign = 1; 290 var paddingY = this.paddingBottom; 291 var bottomBoundaryOfLayout = -layoutAnchor.y * baseHeight; 292 if (this.verticalDirection === VerticalDirection.TOP_TO_BOTTOM) { 293 sign = -1; 294 bottomBoundaryOfLayout = (1 - layoutAnchor.y) * baseHeight; 295 paddingY = this.paddingTop; 296 } 297 298 var nextY = bottomBoundaryOfLayout + sign * paddingY - sign * this.spacingY; 299 var columnMaxWidth = 0; 300 var tempMaxWidth = 0; 301 var secondMaxWidth = 0; 302 var column = 0; 303 var containerResizeBoundary = 0; 304 var maxWidthChildAnchorX = 0; 305 306 var newChildHeight = this.cellSize.height; 307 if (this.type !== Type.GRID && this.resizeMode === ResizeMode.CHILDREN) { 308 newChildHeight = (baseHeight - (this.paddingTop + this.paddingBottom) - (children.length - 1) * this.spacingY) / children.length; 309 } 310 311 children.forEach(function(child, i, arr) { 312 if (!child.activeInHierarchy) { 313 return; 314 } 315 316 //for resizing children 317 if (this.resizeMode === ResizeMode.CHILDREN) { 318 child.height = newChildHeight; 319 if (this.type === Type.GRID) { 320 child.width = this.cellSize.width; 321 } 322 } 323 324 var anchorY = child.anchorY; 325 326 if (secondMaxWidth > tempMaxWidth) { 327 tempMaxWidth = secondMaxWidth; 328 } 329 330 if (child.width >= tempMaxWidth) { 331 secondMaxWidth = tempMaxWidth; 332 tempMaxWidth = child.width; 333 maxWidthChildAnchorX = child.getAnchorPoint().x; 334 } 335 336 if (this.verticalDirection === VerticalDirection.TOP_TO_BOTTOM) { 337 anchorY = 1 - child.anchorY; 338 } 339 nextY = nextY + sign * anchorY * child.height + sign * this.spacingY; 340 var topBoundaryOfChild = sign * (1 - anchorY) * child.height; 341 342 if (columnBreak) { 343 var columnBreakBoundary = nextY + topBoundaryOfChild + sign * (sign > 0 ? this.paddingTop : this.paddingBottom); 344 var bottomToTopColumnBreak = this.verticalDirection === VerticalDirection.BOTTOM_TO_TOP && columnBreakBoundary > (1 - layoutAnchor.y) * baseHeight; 345 var topToBottomColumnBreak = this.verticalDirection === VerticalDirection.TOP_TO_BOTTOM && columnBreakBoundary < -layoutAnchor.y * baseHeight; 346 347 if (bottomToTopColumnBreak || topToBottomColumnBreak) { 348 if (child.width >= tempMaxWidth) { 349 if (secondMaxWidth === 0) { 350 secondMaxWidth = tempMaxWidth; 351 } 352 columnMaxWidth += secondMaxWidth; 353 secondMaxWidth = tempMaxWidth; 354 } else { 355 columnMaxWidth += tempMaxWidth; 356 secondMaxWidth = child.width; 357 tempMaxWidth = 0; 358 } 359 nextY = bottomBoundaryOfLayout + sign * (paddingY + anchorY * child.height); 360 column++; 361 } 362 } 363 364 var finalPositionX = fnPositionX(child, columnMaxWidth, column); 365 if (baseHeight >= (child.height + (this.paddingTop + this.paddingBottom))) { 366 if (applyChildren) { 367 child.setPosition(cc.p(finalPositionX, nextY)); 368 } 369 } 370 371 var signX = 1; 372 var tempFinalPositionX; 373 //when the item is the last column break item, the tempMaxWidth will be 0. 374 var rightMarign = (tempMaxWidth === 0) ? child.width : tempMaxWidth; 375 376 if (this.horizontalDirection === HorizontalDirection.RIGHT_TO_LEFT) { 377 signX = -1; 378 containerResizeBoundary = containerResizeBoundary || this.node._contentSize.width; 379 tempFinalPositionX = finalPositionX + signX * (rightMarign * maxWidthChildAnchorX + this.paddingLeft); 380 if (tempFinalPositionX < containerResizeBoundary) { 381 containerResizeBoundary = tempFinalPositionX; 382 } 383 } else { 384 containerResizeBoundary = containerResizeBoundary || -this.node._contentSize.width; 385 tempFinalPositionX = finalPositionX + signX * (rightMarign * maxWidthChildAnchorX + this.paddingRight); 386 if (tempFinalPositionX > containerResizeBoundary) { 387 containerResizeBoundary = tempFinalPositionX; 388 } 389 390 } 391 392 nextY += topBoundaryOfChild; 393 if (this._datas) this._datas[i] = child.position; 394 }.bind(this)); 395 396 return containerResizeBoundary; 397 }, 398 _doLayoutBasic: function() { 399 var children = this._datas || this.node.children; 400 401 var allChildrenBoundingBox = null; 402 403 children.forEach(function(child, i, arr) { 404 if (!child.activeInHierarchy) { 405 return; 406 } 407 408 if (!allChildrenBoundingBox) { 409 allChildrenBoundingBox = child.getBoundingBoxToWorld(); 410 } else { 411 allChildrenBoundingBox = cc.rectUnion(allChildrenBoundingBox, child.getBoundingBoxToWorld()); 412 } 413 if (this._datas) this._datas[i] = child.position; 414 }); 415 416 if (allChildrenBoundingBox) { 417 var leftBottomInParentSpace = this.node.parent.convertToNodeSpaceAR(cc.p(allChildrenBoundingBox.x, allChildrenBoundingBox.y)); 418 leftBottomInParentSpace = cc.pAdd(leftBottomInParentSpace, cc.p(-this.paddingLeft, -this.paddingBottom)); 419 420 var rightTopInParentSpace = this.node.parent.convertToNodeSpaceAR(cc.p(allChildrenBoundingBox.x + allChildrenBoundingBox.width, 421 allChildrenBoundingBox.y + allChildrenBoundingBox.height)); 422 rightTopInParentSpace = cc.pAdd(rightTopInParentSpace, cc.p(this.paddingRight, this.paddingTop)); 423 424 var newSize = cc.size(parseFloat((rightTopInParentSpace.x - leftBottomInParentSpace.x).toFixed(2)), 425 parseFloat((rightTopInParentSpace.y - leftBottomInParentSpace.y).toFixed(2))); 426 427 var layoutPosition = this.node.getPosition(); 428 var newAnchorX = (layoutPosition.x - leftBottomInParentSpace.x) / newSize.width; 429 var newAnchorY = (layoutPosition.y - leftBottomInParentSpace.y) / newSize.height; 430 var newAnchor = cc.p(parseFloat(newAnchorX.toFixed(2)), parseFloat(newAnchorY.toFixed(2))); 431 432 this.node.setAnchorPoint(newAnchor); 433 this.node.setContentSize(newSize); 434 } 435 }, 436 _doLayoutGrid: function() { 437 var layoutAnchor = this.node.getAnchorPoint(); 438 var layoutSize = this.node.getContentSize(); 439 440 if (this.startAxis === AxisDirection.HORIZONTAL) { 441 this._doLayoutGridAxisHorizontal(layoutAnchor, layoutSize); 442 443 } else if (this.startAxis === AxisDirection.VERTICAL) { 444 this._doLayoutGridAxisVertical(layoutAnchor, layoutSize); 445 } 446 447 }, 448 _doLayoutGridAxisHorizontal: function(layoutAnchor, layoutSize) { 449 var baseWidth = layoutSize.width; 450 451 var sign = 1; 452 var bottomBoundaryOfLayout = -layoutAnchor.y * layoutSize.height; 453 var paddingY = this.paddingBottom; 454 if (this.verticalDirection === VerticalDirection.TOP_TO_BOTTOM) { 455 sign = -1; 456 bottomBoundaryOfLayout = (1 - layoutAnchor.y) * layoutSize.height; 457 paddingY = this.paddingTop; 458 } 459 460 var fnPositionY = function(child, topOffset, row) { 461 return bottomBoundaryOfLayout + sign * (topOffset + child.anchorY * child.height + paddingY + row * this.spacingY); 462 }.bind(this); 463 464 465 var newHeight = 0; 466 if (this.resizeMode === ResizeMode.CONTAINER) { 467 //calculate the new height of container, it won't change the position of it's children 468 var boundary = this._doLayoutHorizontally(baseWidth, true, fnPositionY, false); 469 newHeight = bottomBoundaryOfLayout - boundary; 470 if (newHeight < 0) { 471 newHeight *= -1; 472 } 473 474 bottomBoundaryOfLayout = -layoutAnchor.y * newHeight; 475 476 if (this.verticalDirection === VerticalDirection.TOP_TO_BOTTOM) { 477 sign = -1; 478 bottomBoundaryOfLayout = (1 - layoutAnchor.y) * newHeight; 479 } 480 } 481 482 this._doLayoutHorizontally(baseWidth, true, fnPositionY, true); 483 484 if (this.resizeMode === ResizeMode.CONTAINER) { 485 this.node.setContentSize(baseWidth, newHeight); 486 } 487 }, 488 _doLayoutGridAxisVertical: function(layoutAnchor, layoutSize) { 489 var baseHeight = layoutSize.height; 490 491 var sign = 1; 492 var leftBoundaryOfLayout = -layoutAnchor.x * layoutSize.width; 493 var paddingX = this.paddingLeft; 494 if (this.horizontalDirection === HorizontalDirection.RIGHT_TO_LEFT) { 495 sign = -1; 496 leftBoundaryOfLayout = (1 - layoutAnchor.x) * layoutSize.width; 497 paddingX = this.paddingRight; 498 } 499 500 var fnPositionX = function(child, leftOffset, column) { 501 return leftBoundaryOfLayout + sign * (leftOffset + child.anchorX * child.width + paddingX + column * this.spacingX); 502 }.bind(this); 503 504 var newWidth = 0; 505 if (this.resizeMode === ResizeMode.CONTAINER) { 506 var boundary = this._doLayoutVertically(baseHeight, true, fnPositionX, false); 507 newWidth = leftBoundaryOfLayout - boundary; 508 if (newWidth < 0) { 509 newWidth *= -1; 510 } 511 512 leftBoundaryOfLayout = -layoutAnchor.x * newWidth; 513 514 if (this.horizontalDirection === HorizontalDirection.RIGHT_TO_LEFT) { 515 sign = -1; 516 leftBoundaryOfLayout = (1 - layoutAnchor.x) * newWidth; 517 } 518 } 519 520 this._doLayoutVertically(baseHeight, true, fnPositionX, true); 521 522 if (this.resizeMode === ResizeMode.CONTAINER) { 523 this.node.setContentSize(newWidth, baseHeight); 524 } 525 }, 526 // called every frame, uncomment this function to activate update callback 527 // update: function (dt) { 528 529 // }, 530 });
首先研究下这这两个脚本，使用很简单。scrollView脚本挂载在ScrollView组件上
scrollView下的content挂载脚本scrollViewLayout,type和ResizeMode和layout组件设置差不多，根据自己需求设置
在主脚本里渲染iteam时代码：this.scrollView.node.getComponent("scrollView").set_data(list)；list为要生成iteam的数据数组。
当要清除数据时：
this.scrollView.node.getComponent("scrollView").set_data(list);
iteam上的脚本管理渲染赋值
