用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"})
}
}
运行结果:
参考: