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, 0, false)
    elseif 2 == pages then
        self:addPage(2, 0, false)
        self:addPage(1, 1, true)
        self:addPage(2, 2, true)
        pvWnd:scrollToPage(1)
    elseif pages >= 3 then
        self:addPage(pages, 0, false)
        self:addPage(1, 1, true)
        self:addPage(2, 2, 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, 0, 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, 2, 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, 0, true)
                
                --PageView的当前页索引为0,在0的位置新插入页后原来的页面0变为1;
                --PageView自动显示为新插入的页面0,我们需要显示为页面1,所以强制滑动到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, 2, true)

            end
        end
    end

end

</pre>




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

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

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