quick下Cocos Studio PageView左右循环滑动实现

发布时间：2020-12-14 19:28:33 所属栏目：百科来源：网络整理

导读：现项目中武将信息显示采用了PageView控件,每一页显示6个武将信息,游戏中武将数量可以为0~n,如果一次性将所有武将创建出来显示效率可想而知；所以有了PageView动态刷新并左右循环滑动的需求。大致原理如下: 假设需要显示的信息为n页: 1. n = 1，只有一页，不

现项目中武将信息显示采用了PageView控件,每一页显示6个武将信息,游戏中武将数量可以为0~n,如果一次性将所有武将创建出来显示效率可想而知；
所以有了PageView动态刷新并左右循环滑动的需求。大致原理如下:

假设需要显示的信息为n页:
1. n = 1，只有一页，不需要做循环滑动。

2. n = 2，创建3页：page0,page1,page2; page0和page2显示第2页信息,page1显示第1页信息;
初始化时强制显示page1。

3. n >= 3，创建3页：page0,page 1,page2; page0显示第n页信息,page1显示第1页信息,page2显示第2页信息;
初始化时强制显示page1。

循环实现：
PageView中有3页及以上时，响应TURNING事件，当滚动到第一页时删除最后一页,新建一页插入到最前面; 当滚动最后一页时删除第一页
新建一页插入到最后面。注:目前只有通过添加删除这种方式来现实pageindex的动态改变。

ccs中界面的设计：

1. 每一个页的布局不同，在编辑器中将所有页面创建出来，添加删除的原理同上。

2. 每一个页面布局相同,在编辑器中只需要拼一个页面，代码中使用clone()即可。

页面布局相同代码实现：

<pre class="brush:lua; toolbar: true; auto-links: false;">

--PageView事件
PAGEVIEW_EVENT_TYPE =
{
TURNING = 0,
}

--当前显示的页码(1 ~ pages)
local pageIdx = 1

--英雄列表(id)
local heroList = {1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18}

--PageView
local pvWnd = touchgroup:getWidgetByName("test/pv")

--pIdx: 该页显示的内容索引(1 ~ pages)
--iIdx: 插入位置
--bClone: 是否克隆,第一页已存在为false,否则为true
function test:addPage(pIdx,iIdx,bClone)

local newPage = nil
if not bClone then
newPage = pvWnd:getPage(0)
else
newPage = pvWnd:getPage(0):clone()
end
newPage:setTag(pIdx)
pvWnd:insertPage(newPage,iIdx)

--根据pIdx设置武将信息(每个页面有6个武将)
for i = 1,6 do
-----
end

end

--武将面板刷新
function test:updateHeroPanel()

--删除原来的页面(第一页保留用于clone)
for i = pvWnd:getPages():count() - 1,1,-1 do
pvWnd:removePageAtIndex(i)
end

--添加新的页面(每页显示6个)
local pages = math.ceil(table.nums(heroList) / 6)

pageIdx = 1

if 1 == pages then
self:addPage(1,false)
elseif 2 == pages then
self:addPage(2,false)
self:addPage(1,true)
self:addPage(2,true)
pvWnd:scrollToPage(1)
elseif pages >= 3 then
self:addPage(pages,true)
pvWnd:scrollToPage(1)
end

end

function test:onPageViewEvent(sender,eventType)
if eventType == PAGEVIEW_EVENT_TYPE.TURNING then

local pages = math.ceil(table.nums(heroList) / 6)

if pages >= 3 then
if 0 == pvWnd:getCurPageIndex() then

pageIdx = pageIdx - 1
if pageIdx <= 0 then
pageIdx = pages
end

local nextPageIdx = pageIdx - 1
if nextPageIdx <= 0 then
nextPageIdx = pages
end

pvWnd:removePageAtIndex(2)
self:addPageToHeroPanel(nextPageIdx,true)

--PageView的当前页索引为0,在0的位置新插入页后原来的页面0变为1;
--PageView自动显示为新插入的页面0,我们需要显示为页面1,所以强制滑动到1.
pvWnd:scrollToPage(1)
--解决强制滑动到1后回弹效果
pvWnd:update(10)

elseif 2 == pvWnd:getCurPageIndex() then

pageIdx = pageIdx + 1
if pageIdx > pages then
pageIdx = 1
end

local nextPageIdx = pageIdx + 1
if nextPageIdx > pages then
nextPageIdx = 1
end

pvWnd:removePageAtIndex(0)
self:addPageToHeroPanel(nextPageIdx,true)

end
elseif pages == 2 then
if 0 == pvWnd:getCurPageIndex() then

local nextPageIdx = 0
if 1 == pageIdx then
pageIdx = 2
nextPageIdx = 1
else
pageIdx = 1
nextPageIdx = 2
end

pvWnd:removePageAtIndex(2)
self:addPageToHeroPanel(nextPageIdx,true)

--PageView的当前页索引为0,所以强制滑动到1.
pvWnd:scrollToPage(1)
--解决强制滑动到1后回弹效果
pvWnd:update(10)

elseif 2 == pvWnd:getCurPageIndex() then

local nextPageIdx = 0
if 1 == pageIdx then
pageIdx = 2
nextPageIdx = 1
else
pageIdx = 1
nextPageIdx = 2
end

pvWnd:removePageAtIndex(0)
self:addPageToHeroPanel(nextPageIdx,true)

end
end
end

end

</pre>

每一个页面布局不同的实现此处不再赘述!

小弟第一次发帖文笔有限欢迎指正!

http://www.cocoachina.com/bbs/simple/?t216078.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!