Nanfeng

Notes on software development, code, and curious ideas

Cocos Creator PageView Auto Paging with schedule and scrollToPage

In
Auto-page a Cocos Creator PageView at a fixed interval with schedule, getPages, and scrollToPage while controlling duration, page bounds, and forward-reverse direction.

Schedule Automatic PageView Navigation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const pageView = this._view._PageC_List;
const pageCount = pageView.getPages().length;
const interval = 3;
const scrollDuration = 1;

let currentPageIndex = 0;
let direction = 1;

if (pageCount > 1) {
    this.schedule(() => {
        if (currentPageIndex === pageCount - 1) {
            direction = -1;
        } else if (currentPageIndex === 0) {
            direction = 1;
        }

        currentPageIndex += direction;
        pageView.scrollToPage(currentPageIndex, scrollDuration);
    }, interval);
}

The direction reverses at the first and last pages, producing a back-and-forth carousel. The pageCount > 1 guard prevents an invalid index when the PageView has zero or one page. Unschedule the callback when automatic paging should stop.

+