移动开发中,经常会看到这样的需求,用户拖动列表至列表最下端时,软件自动加载新的内容。这就是惰性加载,也叫延时加载。
实现的关键是监控当用户拖动列表至最下端时的事件。
上拉加载原理:contentY为列表上拉后列表左上角点距显示框左上解点的高度,listView1.height为可显示部分的高度,假设列表单元的高度为listViewCellHeight,列表个数为listViewCellCount,则最后个列表单元恰好被显示出来时的条件为:contentY+listView1.height==listViewCellHeight*listViewCellCount
![QML ListView实现惰性加载 - 风华正茂 - 乐趣来自探索](http://img1.ph.126.net/sYoO1IyPFQzpSbMo7pDcJA==/6619390952211568405.png)
ListView {
id: listView1
...
//拖动后停止时触发此事件
onDragEnded:{
if(listView1.contentY > (listViewCellHeight * (flightListModel.count+1) - listView1.height))
{
//加载下一页:
ticketModel.doGetFlightInfo("2014-8-01", departCity, arrivalCity, 1, "DepartureDate", "ASC", pageCount, pageIndex);
pageIndex = pageIndex+1;
}
}
//最下方显示“上拉加载更多”“正在加载”等
footer:Rectangle {
width: listView1.width
height: 0.5 * listViewCellHeight
Text {
id: label
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
color:"#b9b7b7"
font.pixelSize: 32
text:"上拉加载更多"
}
states: [
State {
//将最后一个列表单元上拉至距底部一个单元高时显示“正在加载”,flightListModel.count+1就是基于这个
name: "base"; when: listView1.contentY <= (listViewCellHeight * (flightListModel.count+1) - listView1.height)
PropertyChanges { target: label; text: "上拉加载更多";}
},
State {
name: "pulled"; when: listView1.contentY > (listViewCellHeight * (flightListModel.count+1) - listView1.height)
PropertyChanges { target: label; text: "正在加载";}
}
]
}
model: ListModel {
id:flightListModel
ListElement {
AirLine:""//航空公司
FlightNumber:""//航班号
PlaneType:""//机型
DepartTime:""//起飞时间
ArriveTime:""//到达时间
DepartAirport:""//起飞机场
ArriveAirport:""//到达机场
SeatClass:""//舱位等级
SeatCount:""//座位数
Price:""//价格
Discount:""//折扣
DiscountPrice:""//已优惠
PolicyId:""//(用于回发给PC端)
}
}
...
}
![QML ListView实现惰性加载 - 风华正茂 - 乐趣来自探索](http://img1.ph.126.net/-aoIcIkg_wheq-wLj6S8Gg==/6619310687862740218.png)
![QML ListView实现惰性加载 - 风华正茂 - 乐趣来自探索](http://img1.ph.126.net/vDF1G-677QJeXf8W0DCRQQ==/6599323765494722863.png)
转载:http://blog.163.com/wslngcjsdxdr@126/blog/static/16219623020145254215623/