Fix Cocos Creator PageView and ScrollView Touch Conflicts by Gesture Direction

A screen may need horizontal page switching and vertical scrolling at the same time. When a ScrollView is nested inside a PageView, both controls may compete for the same touch gesture.

Nested PageView and ScrollView Structure

The hierarchy in this example is:

Without extra handling, vertical scrolling works inside the white ScrollView area, but horizontal page switching does not.

Detect Horizontal Swipe Gestures

The solution below measures the gesture direction and explicitly changes pages when horizontal movement exceeds a threshold.

public initView() {
    const node = this._view._ScrollC_game.node;
    node.on(Node.EventType.TOUCH_START, this.touchStart, this);
    node.on(Node.EventType.TOUCH_MOVE, this.touchMove, this);
    node.on(Node.EventType.TOUCH_END, this.touchEnd, this);
}

public touchStart(event) {
    this.canForward = true;
    this.startPosition = event.getLocation();
    this.pageIndex = this._view._PageC_record.getCurrentPageIndex();
}

public touchMove(event) {
    if (!this.canForward) return;

    const current = event.getLocation();
    const distanceX = current.x - this.startPosition.x;

    if (Math.abs(distanceX) > 50) {
        const pages = this._view._PageC_record.getPages();
        const target = distanceX > 0
            ? this.pageIndex - 1
            : this.pageIndex + 1;
        const clamped = Math.max(0, Math.min(target, pages.length - 1));

        this._view._PageC_record.scrollToPage(clamped);
        this.canForward = false;
    }
}

public touchEnd(event) {
    const end = event.getLocation();
    const distanceX = end.x - this.startPosition.x;
    const distanceY = end.y - this.startPosition.y;

    if (Math.abs(distanceX) < 50 && Math.abs(distanceY) < 50) {
        console.log('The gesture was a tap');
    }
}

The canForward flag prevents one gesture from triggering multiple page changes, and clamping prevents an invalid page index.