qml listView上拉动态加载数据

用qml的listView显示列表数据时，有时数据量大，这个时候我们就需要动态分页加载数据，往上拉加载下一页数据，这种效果用ListView如何实现呢？下面来看具体的示例：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    property int nIndex: 6

    Rectangle {
        id: listRect
        color: "green"
        anchors.fill: parent


        //菜单
        ListModel {
            id: listRouteModel
            ListElement {titleText: qsTr("标题0"); titleColor: "white"}
            ListElement {titleText: qsTr("标题1"); titleColor: "white"}
            ListElement {titleText: qsTr("标题2"); titleColor: "white"}
            ListElement {titleText: qsTr("标题3"); titleColor: "white"}
            ListElement {titleText: qsTr("标题4"); titleColor: "white"}
            ListElement {titleText: qsTr("标题5"); titleColor: "white"}

        }

        ListView {
            id: listRouteView
            width: 100; height: 320
            anchors.top: parent.top; anchors.topMargin: 50;
            anchors.left: parent.left; anchors.leftMargin: 50
            orientation: ListView.Vertical//垂直列表
            interactive: true;//元素可拖动
            clip: true //
            ScrollBar.vertical: ScrollBar {
                id: scrollBar
                onActiveChanged: {
                    //console.log("onActiveChanged========================")
                    active = true;
                }
                Component.onCompleted: {
                    scrollBar.active = true;
                    console.log("Component.onCompleted========================")
                }
            }

            model: listRouteModel;
            focus: true
            delegate: tabDelegate

            property real contentYStart: 0
            property bool isPullData: false

            onFlickStarted: {
                console.log("start,origY - ", originY, " contentY - ", contentY);
                contentYStart = contentY
                console.log("contentYStart ======== ", contentYStart);
            }

            onFlickEnded: {
                //console.log("end,origY - ", originY, " contentY - ", contentY);
                isPullData = (contentY < contentYStart) ? true:false
                console.log("isPullData ======== ", isPullData);
                if(isPullData)
                    pullData()
            }

//            onContentYChanged: {
//                console.log("onContentYChanged contentY - ", contentY);
//            }

//            onCurrentIndexChanged: {
//                console.log("onCurrentIndexChanged currentIndex================" + currentIndex)
//            }
//            onModelChanged: {

//            }
//            onMoveChanged: {
//                console.log("onMoveChanged,origY - ", originY, " contentY - ", contentY);
//            }

//            onMovementStarted: {
//                console.log("onMovementStarted,origY - ", originY, " contentY - ", contentY);
//            }

//            onMovementEnded: {
//                console.log("onMovementEnded,origY - ", originY, " contentY - ", contentY);
//            }

        }
        //Component
        Component {
            id: tabDelegate
            Rectangle {
                width: 100; height: 25;
                color: (listRouteView.currentIndex === index) ? "blue": "transparent"
                //标题
                Text {
                    width: parent.width - 3; height: 25;
                    anchors.left: parent.left;
                    anchors.leftMargin: 0;
                    anchors.top: parent.top
                    anchors.topMargin: 0
                    font.pixelSize: 16;
                    color: (listRouteView.currentIndex === index) ? "red" : titleColor
                    text: titleText
                    horizontalAlignment: Text.AlignHCenter; //文字水平居中对齐
                    verticalAlignment: Text.AlignVCenter;//文字垂直居中对齐
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        listRouteView.currentIndex = index
                        //console.log("clicked tab=================" + index)
                        //selectIndex(index)
                        console.log("clicked currentIndex================" + listRouteView.currentIndex)
                    }
                }
            }
        }//end Component


    }

    function pullData(){
        var title = "标题" + (nIndex++).toString()
        listRouteModel.append({titleText: title, titleColor: "white"})
    }

}

运行结果：

参考：

Qt Quick之ListView下拉刷新数据_安晓辉生涯——聚焦程序员的职业规划与成长-CSDN博客

QML ListView几个常用且非常重要的属性_luoyayun361的专栏-CSDN博客