listview实现上下翻页效果

xuexiwrite 2021-08-09 原文

listview实现上下翻页效果


import QtQuick 2.0

Item {
    id: root

    width: 1920
    height: 1080

    Item {
        id: dragItem
        width: 100
        height:540
        x:parent.width/2 - width/2
        y:parent.height/5
        clip:true

        ListView {
            id:dragList
            width: 100
            height: 10*100
            spacing: 10
            interactive: false

            model: 10
            delegate: Rectangle {
                width: 100
                height: 100
                color: "green"
                Text {
                    anchors.centerIn: parent
                    text:index
                }
            }
        }
    }


    //上箭头
    Rectangle {
        width: 100
        height: 100
        x:1200
        y:500
        color: "lightgray"
        Text {
            anchors.centerIn: parent
            text:"上一个"
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                if(dragList.y == 0 )return
                dragList.y += 550
            }
        }
    }
    //下箭头
    Rectangle {
        width: 100
        height: 100
        x:1200
        y:620
        color: "lightgray"
        Text {
            anchors.centerIn: parent
            text:"下一个"
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                if(dragList.y == -550)return
                dragList.y -= 550
            }
        }
    }

}