ScrollView是比较常用的UI组件之一，游戏中的任务榜、排行榜都少不了它，实际使用中存在一个问题，例如：在排行榜中要显示前100名玩家，如果真的把这100名玩家的信息全部创建，并加载进ScrollView，对移动设备的宝贵内存会是巨大的浪费。其实玩家在屏幕上总能看到的最多只有7、8项而已，所以实际上只用创建比显示多一点的数量，再通过缓冲区实时动态更新数据，就可以给玩家呈现出尽可能多数量的列表（依内存而定，理论上无限），即节省内存，也不影响性能。
动态更新原理
要了解它的运行原理，先看下图：
动态更新原理.jpg
如图把ScrollView分成三部分，按区域从小到大依次是：
- 屏幕可见区：指屏幕上玩家可看可操作的列表区域，随着滚动会显示不同内容；
- 缓冲区：指内存中真正创建了的列表所占的区域，包含屏幕可见区，比可见区多出一部分用于动态更新；
- content区：指整个ScrollView用来滚动的区域，通常数据有多少就有多大，包含缓冲区，其余部分空白；
假设总共要显示100项数据，可视区能容纳7项，缓冲区有15项，多出8项用于动态更新。再分三种情况讲解：
- 刚初始化完成时：此时在右侧按钮上提示有100行，实际上只创建了第1-15行，而玩家能看到的是第1-7行。如果玩家想要看到更多，必然会向上或向下滚动屏幕；
- 向上滚动时：在移动设备上，如果玩家想要看到下面的行，所做的操作是触摸往上滑动，则整个content区往上移动，也带动content区的item往上移动，更新函数会不断遍历所创建的15项item，如果检测到某item的y坐标超出了缓冲区的上边界（该item已经被玩家看过或不想再看），则把该item往下移动一个缓冲区的高度（移动该item到玩家即将看到的位置），并更新它的显示ID；
- 向下滚动时：同理，content区的item往下移动，update不断遍历所创建的15项item，如果检测到某item的y坐标越过了缓冲区的下边界（该item已经被玩家看过或不想再看），则把该item往上移动一个缓冲区的高度（移动该item到玩家即将看到的位置），并更新它的显示ID；
关键代码
// 返回item在ScrollView空间的坐标值
getPositionInView (item) {
const worldPos = item.parent.convertToWorldSpaceAR(item.position)
const viewPos = this.scrollView.node.convertToNodeSpaceAR(worldPos)
return viewPos
},
// content位置改变时调用，根据滚动位置动态更新item的坐标和显示(所以spawnCount可以比totalCount少很多)
_updateContentView () {
if (!this.isInit || !this.canUpdateFrame) {
return // we don't need to do the math every frame
}
this.canUpdateFrame = false
const items = this.items
const isDown = this.scrollView.content.y < this.lastContentPosY
// offset为缓冲区高度，item总是上移或下移一个缓冲区高度
// BufferZone和-BufferZone为ScrollView中，缓冲区上边界和下边界的位置
const offset = (this.itemHeight + this.spacing) * this.cacheRow
let newY = 0
for (let i = 0; i < items.length; i += this.colCount) {
const viewPos = this.getPositionInView(items[i])
if (isDown) {
newY = items[i].y + offset
if (viewPos.y < -this.bufferZone && newY < 0) {
for (let j = 0; j < this.colCount; j++) {
const index = j + i
items[index].y = newY
const itemId = items[index].itemId - this.spawnCount// update item id
items[index].itemId = itemId
if (itemId >= 0) {
items[index].active = true
this.itemUpdateFunc(itemId, items[index], this.data[itemId])
} else {
items[index].active = false
}
}
}
} else {
newY = items[i].y - offset
if (viewPos.y > this.bufferZone && newY > -this.content.height) {
for (let j = 0; j < this.colCount; j++) {
const index = j + i
items[index].y = newY
const itemId = items[index].itemId + this.spawnCount// update item id
items[index].itemId = itemId
if (itemId < this.data.length) {
items[index].active = true
this.itemUpdateFunc(itemId, items[index], this.data[itemId])
} else {
items[index].active = false
}
}
}
}
}
// 更新lastContentPosY
this.lastContentPosY = this.scrollView.content.y
this.canUpdateFrame = true
},
完整代码地址：ScrollViewHelper
