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

前端之家收集整理的这篇文章主要介绍了quick下Cocos Studio PageView左右循环滑动实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
现项目中武将信息显示采用了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

原文链接:https://www.f2er.com/cocos2dx/346119.html

猜你在找的Cocos2d-x相关文章