关于PageView实现无限循环功能时的bug

Creator 2.x
#1

Creator 2.4.2版本，Mac

想基于PageView实现一个无线循环的全屏页面视图，原理就是：
建立三个page：page_1、page_2、page_3；初始定位到page_2；
当滑动到page_1时，删除page_3，新建一页插入到最前面，然后定位到page_2；
当滑动到page_3时，删除page_1，新建一页插入到最后面，然后定位到page_2。

目前遇到两个问题：
1.下滑时功能没问题，但上滑时，能插入一个page_3，但神奇的是，再次上滑Page Event居然不响应了，从而无法实现一直上滑；
记得之前论坛看过有人说removePage有可能会清空监听的事件，不知道是否有这个bug、有没有修复；

2.下滑时有闪屏现象，不知道该如何消除；看之前的demo有调用PageView的update接口，但现在已经没有这个接口了。

核心代码：

    OnPageViewEvent(event, custom){
        let pageView = this.m_pageviewNode.getComponent(cc.PageView);
        let currPageIndex = pageView.getCurrentPageIndex();

        cc.log("OnPageViewEvent begin, page index="+currPageIndex);

        if(currPageIndex != 1){  // page changed
            let pages = pageView.getPages();
            if(currPageIndex == 0){
                let lastPage = pages[pages.length-1];
                pageView.removePage(lastPage);
                pageView.insertPage(lastPage, 0);   // add on top

                pageView.scrollToPage(1,0);
                pageView.setCurrentPageIndex(1);
            }
            else if(currPageIndex == (pages.length-1)){
                let firstPage = pages[0];
                pageView.removePage(firstPage);
                pageView.addPage(firstPage);    // add in bottom

                pageView.scrollToPage(1,0);
                pageView.setCurrentPageIndex(1);
            }
        }
        else{
            cc.log("Page not change.");
        }

        cc.log("OnPageViewEvent end, page index="+currPageIndex);
    }

附件为demo示例，麻烦帮忙查看下，多谢！PageViewTest.zip (884.0 KB)

1赞
#2

感觉pageview设计就是 只能顺序前进和后退. 0 ->1->2 这样的,如果再下标2的位置还想翻,就翻不动了,就算是把第一个加在后面也只是替换了节点, 不能达到循环的效果. 只能自己实现一下了.

#3

如果只是改变currentPageIndex. 也不会改变节点顺序,只会影响下次翻页.

#4

那如果想实现一个类似抖音首页无限滑屏的功能，除了这个PageView，Creator没有别的更合适的控件了吧？

自己实现成本有点高，这算个挺通用的功能，实现方案应是现成的才对啊，结果搜不到多少有用的案例。

#5

不难实现的

#6

遇到过类似问题，最终试用ScrollView对滑动事件监听解决的 大致思路就是做两份页面 （ 0 -> 1 -> 2 -> 0© -> 1© ->2©）滑动结束后将content移动到当前page需要到达的位置，当玩家滑动到边界（0和2©）时将页面设置到对应的（0©和2）位置其实就实现了循环翻页的效果

#7

感谢提供思路，已基于这个思路实现了

#8

mark一下

#9

能分享一下吗 正好有这个需求 :laughing:

1赞
#10

解决了吗请问

#11

感谢大佬思路，终于做好无限滑动了 :sweat:page问题太多了

#12

GIF 2021-10-11 20-33-54

1赞
#13

大佬能分享一下吗 让我学习一下 谢谢了

#14

引擎自带的pageview太难用，我都是自己实现。逻辑也不复杂，拓展也方便。

#15

for (let index = 0; index < 5; index++) {

        let obj = cc.instantiate(this.pageNode)

        obj.width = this.page.node.width

        this.page.insertPage(obj, index)

    }

    //计算中心位置

    let list = this.page.getPages()

    if (list.length > 0) {

        let width = list[0].width

        this._centerX = list.length / 2 * width

    }

    //中心index的数值

    let pageIndex = Math.floor(list.length / 2)

    //注册事件

    this.page.node.on("scroll-ended", () => {

        // cc.log("测试滑动", this.page.getCurrentPageIndex())

        if (this.page.getCurrentPageIndex() <= pageIndex - 1) {

            this.page.content.setPosition(-this._centerX, 0)

            this.page.setCurrentPageIndex(pageIndex)

        } else if (this.page.getCurrentPageIndex() >= pageIndex + 1) {

            this.page.content.setPosition(-this._centerX, 0)

            this.page.setCurrentPageIndex(pageIndex)

        }

    })
#17

核心代码就这些，demo我做成项目了就不能分享了

#18

谢谢大佬百忙中的指点，万分感谢 :100:

#19

问题不大，主要是思路有了，逻辑就简单了

#20

前后在加2个节点，配合滚动api，完美。

#21

你这个滑动完之后会闪一下的吧，重新设置位置的话