QML ListView实现惰性加载

移动开发中，经常会看到这样的需求，用户拖动列表至列表最下端时，软件自动加载新的内容。这就是惰性加载，也叫延时加载。

实现的关键是监控当用户拖动列表至最下端时的事件。

上拉加载原理：contentY为列表上拉后列表左上角点距显示框左上解点的高度，listView1.height为可显示部分的高度，假设列表单元的高度为listViewCellHeight,列表个数为listViewCellCount，则最后个列表单元恰好被显示出来时的条件为：contentY+listView1.height==listViewCellHeight*listViewCellCount

 

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端)

                }

            }

...

}

 

 

转载：http://blog.163.com/wslngcjsdxdr@126/blog/static/16219623020145254215623/