How can I display items across multiple pages when swiping in GridView QML?

I'm unable to achieve the following:

While swiping the grid view, a set of items should scroll as a page, and the next set of items should be displayed in the next page.

For example, I have total of 20 items, First page should display 10, and second should display 10. If it is more than 20 items, then dynamically, a 3rd page should be created for the rest of the items.

Here's my attempt :

GridExample.qml

import QtQml 2.12
import QtQuick 2.12
import QtQml.Models 2.12
GridView {
id: root
width: 320; height: 200
cellWidth: 80; cellHeight: 80
displaced: Transition {
NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
}
flow: Grid.TopToBottom
//! [0]
model: DelegateModel {
//! [0]
id: visualModel
model: ListModel {
id: colorModel
ListElement { color: "blue" }
ListElement { color: "green" }
ListElement { color: "red" }
ListElement { color: "yellow" }
ListElement { color: "orange" }
ListElement { color: "purple" }
ListElement { color: "cyan" }
ListElement { color: "magenta" }
ListElement { color: "chartreuse" }
ListElement { color: "aquamarine" }
ListElement { color: "indigo" }
ListElement { color: "black" }
ListElement { color: "lightsteelblue" }
ListElement { color: "violet" }
ListElement { color: "grey" }
ListElement { color: "springgreen" }
ListElement { color: "salmon" }
ListElement { color: "blanchedalmond" }
ListElement { color: "forestgreen" }
ListElement { color: "pink" }
ListElement { color: "navy" }
ListElement { color: "goldenrod" }
ListElement { color: "crimson" }
ListElement { color: "teal" }
ListElement { color: "springgreen" }
ListElement { color: "salmon" }
ListElement { color: "blanchedalmond" }
ListElement { color: "forestgreen" }
ListElement { color: "pink" }
ListElement { color: "navy" }
ListElement { color: "goldenrod" }
ListElement { color: "crimson" }
ListElement { color: "teal" }
}
//! [1]
delegate: DropArea {
id: delegateRoot
required property color color
width: 80; height: 80
onEntered: function(drag) {
visualModel.items.move((drag.source as Icon).visualIndex, icon.visualIndex)
}
property int visualIndex: DelegateModel.itemsIndex
Icon {
id: icon
dragParent: root
visualIndex: delegateRoot.visualIndex
color: delegateRoot.color
}
}
//! [1]
}
}

Icon.qml

import QtQuick 2.15
Rectangle {
id: icon
required property Item dragParent
property int visualIndex: 0
width: 72
height: 72
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
radius: 3
Text {
anchors.centerIn: parent
color: "white"
text: parent.visualIndex
}
DragHandler {
id: dragHandler
}
Drag.active: dragHandler.active
Drag.source: icon
Drag.hotSpot.x: 36
Drag.hotSpot.y: 36
states: [
State {
when: dragHandler.active
ParentChange {
target: icon
parent: icon.dragParent
}
AnchorChanges {
target: icon
anchors.horizontalCenter: undefined
anchors.verticalCenter: undefined
}
}
]
}

Well for a mockup, you could use a surrounding ListView with orientation: ListView.Horizontal and snapMode: ListView.SnapOneItem to mimick a paging swipe. Within each ListView delegate, you could implement an instance of GridView each GridView displaying 10 records from a master list. For 30 items, I create 3 pages (model: 3) which 10 items being displayed per page. Below is a crude example of this:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    property var dat: {
        var list = [ ];
        for (let ch of "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234".match(/./g)) {
            list.push(ch);
        }
        return list;
    }
    ListView {
        anchors.centerIn: parent
        width: 320
        height: 200
        model: 3
        orientation: ListView.Horizontal
        snapMode: ListView.SnapOneItem
        clip: true
        delegate: Frame {
            width: ListView.view.width
            height: ListView.view.height
            property int pageIndex: index
            GridView {
                anchors.fill: parent
                cellWidth: 70
                cellHeight: 70
                model: 10
                delegate: Label {
                    width: 65
                    height: 65
                    property int itemIndex: index + pageIndex * 10
                    text: dat[itemIndex]
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    background: Rectangle { border.color: "red" }
                }
            }
        }
    }
}

You can Try it Online!