定义
可视区域加载，顾名思义，即listview只加载数据源中的可视部分，而不可视部分则不需要加载。其实质也是懒加载技术（简称lazyload）的一种，已经不是什么新鲜的技术了，js程序员对网页性能优化经常会采用这种方案，大型网站中都有lazyload的身影，如谷歌的图片搜索页，淘宝网等。lazyload的核心是按需加载。
使用场合
在游戏中，还有哪些地方需要用到这种可视区域的listview呢？没错，聊天窗口。现在手游的聊天内容展示越来越丰富，再不是一两年前的手游纯文字聊天能比拟的。玩家头像、富文本、超链接、动态表情，在加上数量庞大的聊天记录，不做任何优化的话，仅打开一个聊天窗口一段时间，也会消耗不少的cpu和内存。如果项目有这种聊天需求，也是时候考虑优化方案了。
方案设计
在设计优化方案之前，参考了下梦幻手游的世界聊天，看看这个同样用cocos2dx-lua的scrollview控件，添加了怎样的特性。偶然发现，把加载了一定数量的消息滚动到中央，手指在聊天框中间做上下幅度4cm的拖动，无论是向上还是向下滚动，都会发生一瞬间的卡顿。到这里其实已经印证了我猜想中的方案了，下面来说一下这个方案。
在我的方案中，数据源（青色背景），加载区域（蓝色），可视区域（灰色）可以用下面的图来描述（有点丑，将就下）
有点像滑动的窗口故取名SlideWindow。
当屏幕可视区域滚动到已加载区域的边缘时候，加载区域往滚动方向加载更多数据，并且加载区域为保持一定数量的item，删除掉对应反方向的数据。这种可视区域维持一定数量的item，应该就是导致梦幻聊天在某个临界区上下滚动一瞬间卡顿的原因了。使用这种方案，无论梦幻的聊天累积了多少条聊天记录，每次都只是加载一定数量的item，在拖动时按需加载，调和了数量大和首次打开界面流畅的矛盾。梦幻的聊天还有一个非常人性的设计，当可视区域在顶部的时候，设置为锁定状态（新消息置顶），而当可视区在中间时候，为非锁定状态（新消息显示数目提示，而不会让玩家浏览历史记录时候受到新消息置顶的困扰）。
实现
这里我用的cocos2dx-lua实现了一个原型，暂时还没有加入到项目中，实现思想跟之前实现的lazylistview差不多。
这是封装的成员属性，维护已加载区域的头指针和尾指针。
function SlideWindow:ctor(list_view)
self.list_view_ = list_view
self.max_size_ = 40 -- 列表项的最大个数
self.load_step_ = 20 -- 每次滑动加载的步长
self.head_ = 1 -- 当前头的index
self.tail_ = 0 -- 当前尾的index
self.on_item_callback_ = nil
end
当检测到需要加载数据时，调用need_load
-- 触发加载，-1为向上加载，1为向下加载
-- @return 返回本次加载的个数
function SlideWindow:need_load(direction)
local ret = 0
local start = self.tail_ + 1
if direction < 0 then
start = self.head_ - 1
end
-- 向上没有数据，返回
if start <= 0 then
return 0
end
-- 尝试加载load_step个列表
local item_tpl = 1
while item_tpl and ret < self.load_step_ do
item_tpl = self.on_item_callback_(start + ret*direction)
if item_tpl then
if direction < 0 then
if self.head_ == 1 then
break
end
self.head_ = self.head_ - 1
self.list_view_:insertCustomItem(item_tpl,0)
else
self.tail_ = self.tail_ + 1
self.list_view_:pushBackCustomItem(item_tpl)
end
ret = ret + 1
end
end
if ret == 0 then
return ret
end
-- 判断是否达到最大数量
if self.tail_ - self.head_ + 1 > self.max_size_ then
for i=1,self.tail_ - self.head_ - self.max_size_ do
if direction < 0 then
self.tail_ = self.tail_ - 1
self.list_view_:removeLastItem()
else
self.head_ = self.head_ + 1
self.list_view_:removeItem(0)
end
end
end
return ret
end
监听函数，控制触发在加载的时机
-- 监听SlideWindow滚动，动态加载列表项
function SlideWindow:_init_listener()
local extend = false
local last_pos = 0
local distance = 60
local inner = self.list_view_:getInnerContainer()
local outer_size = self.list_view_:getContentSize()
function scroll_callback(sender, eventType)
if eventType == SCROLLVIEW_EVENT_SCROLLING then
--print("正在滚动")
local inner_size = self.list_view_:getInnerContainerSize()
local pos = inner:getPositionY()
if not extend then
if pos > -distance and last_pos - pos < 0 then -- 接近底部
extend = true
self:need_load(1)
elseif inner_size.height - (outer_size.height-pos) < distance and last_pos - pos > 0 then -- 接近顶部
extend = true
self:need_load(-1)
end
extend = false
end
last_pos = pos
end
end
self.list_view_:addEventListenerScrollView(scroll_callback)
end
到这里已经基本写完了，大概一百多行代码，还有更多流畅性的问题就要留待使用中逐步优化了。
