ListView学习2--使用ListView做上下翻页

ListView想要做到上下翻页的效果需要使用如下参数
positionViewAtIndex(int index,PositionMode mode) Positions the view such that the index is at the position specified by mode:

• ListView.Beginning - position item at the top (or left for horizontal orientation) of the view.
• ListView.Center - position item in the center of the view.
• ListView.End - position item at bottom (or right for horizontal orientation) of the view.
• ListView.Visible - if any part of the item is visible then take no action, otherwise bring the item into view.
• ListView.Contain - ensure the entire item is visible. If the item is larger than the view the item is positioned at the top (or left for horizontal orientation) of the view.
• ListView.SnapPosition - position the item at preferredHighlightBegin. This mode is only valid if highlightRangeMode is StrictlyEnforceRange or snapping is enabled via snapMode.

If positioning the view at index would cause empty space to be displayed at the beginning or end of the view, the view will be positioned at the boundary. It is not recommended to use contentX or contentY to position the view at a particular index. This is unreliable since removing items from the start of the list does not cause all other items to be repositioned, and because the actual start of the view can vary based on the size of the delegates. The correct way to bring an item into view is with positionViewAtIndex. Note: methods should only be called after the Component has completed. To position the view at startup, this method should be called by Component.onCompleted. For example, to position the view at the end:
  Component.onCompleted: positionViewAtIndex(count - 1, ListView.Beginning) 这个methods是通过定位一个元素，将其放置在一个指定的位置。
不多说，直接上代码： 下面贴上一段上下翻页的效果代码： 在下面代码中创建上一页和下一页按钮 property int num :0     property int messageNumber : 9 Item{         id:upAndDownPage         width: ticketMessageImage.width         height: ticketMessageImage.height         anchors{horizontalCenter: checkMessageBoxImage.horizontalCenter;bottom: checkMessageBoxImage.bottom;bottomMargin: 15}
        Row{             spacing: 100             anchors{horizontalCenter: upAndDownPage.horizontalCenter;verticalCenter: upAndDownPage.verticalCenter} //一页只放10条，也只能显示10条，这样就不会产生滑动，当选择下一页的时候，将数据再以10条为单位放入listmodel中，进行显示             Item{                 id:upTurnPage                 width: upTurnPageText.width                 height:upTurnPageText.height //                color: "#30FFFF"                 Text {                     id: upTurnPageText                     text: qsTr("上一页")                     font.pixelSize: 30                     color: "white"                 }                 MouseArea{                     anchors.fill: upTurnPage                     //16                     onClicked:{                         num = num - messageNumber;                         if(num <= 0)                         {                             num = 0;                         }                         recordList.positionViewAtIndex(recordList.count - recordList.count +  num,ListView.Beginning);                         console.log(recordList.count - recordList.count +  num)                     }                 }             }
            Rectangle{                 id:downTurnPage                 width: downTurnPageText.width                 height:downTurnPageText.height                 color: "#30FFFF"                 Text {                     id: downTurnPageText                     text: qsTr("下一页")                     color: "white"                     font.pixelSize: 30                 }                 MouseArea{                     anchors.fill: downTurnPage                     onClicked:{                         //5为一个界面显示多少条信息，可用变量                         num = num + messageNumber;                         if(num >= recordList.count-messageNumber)                         {                             num = recordList.count-messageNumber;                         }                         recordList.positionViewAtIndex(recordList.count-recordList.count+num,ListView.Beginning);                         console.log(recordList.count-recordList.count+num)                     }                 }             }         }     } }
在下面的代码中创建ListView视图 Item {         id:checkHistoralRecordTitleItem         width: ticketMessageImage.width         anchors{top:historicalRecordImage.bottom;topMargin:10; horizontalCenter: checkMessageBoxImage.horizontalCenter}         height:35 //        color:"#33FFFF"
        Item {             id: tradeTimeItem             width:parent.width*0.25             height:24             Text{                 id:tradeTimeText                 color: "yellow"                 text:"交易时间"                 font.pixelSize: 24                 anchors{verticalCenter: tradeTimeItem.verticalCenter;horizontalCenter: tradeTimeItem.horizontalCenter}             }         }
        Item {             id: terminalNumberItem             width:parent.width*0.25             height:24             anchors{left:tradeTimeItem.right;verticalCenter: tradeTimeItem.verticalCenter }             Text{                 id:terminalNumberItemText                 color: "yellow"                 text:"终端编号"                 font.pixelSize: 24                 anchors{verticalCenter: terminalNumberItem.verticalCenter;horizontalCenter: terminalNumberItem.horizontalCenter}             }
        }
        Item {             id: tradeTypeItem             width:parent.width*0.25             height:24             anchors{left:terminalNumberItem.right;verticalCenter: tradeTimeItem.verticalCenter }             Text{                 id:tradeTypeItemText                 color: "yellow"                 text:"类型"                 font.pixelSize: 24                 anchors{verticalCenter: tradeTypeItem.verticalCenter;horizontalCenter: tradeTypeItem.horizontalCenter}             }
        }
        Item {             id: tradeMoneyItem             width:parent.width*0.25             height:24             anchors{left:tradeTypeItem.right;verticalCenter: tradeTimeItem.verticalCenter }             Text{                 id:tradeMoneyItemText                 color: "yellow"                 text:"金额"                 font.pixelSize: 24                 anchors{verticalCenter: tradeMoneyItem.verticalCenter;horizontalCenter: tradeMoneyItem.horizontalCenter}             }
        }     }

    Item{         id:historicalRecordItem         width:historicalRecordImage.width         height:300         anchors{top:checkHistoralRecordTitleItem.bottom;topMargin:10; horizontalCenter: checkMessageBoxImage.horizontalCenter}         Column{             ListView{                 id:recordList                 width: historicalRecordItem.width                 height: historicalRecordItem.height                 spacing:10                 clip:true                 model:tradeRecordList                 delegate:HMBOMCheckViewHistorialRecordContextMode{}             }         }     }

在本地创建ListModel用于测试 ListModel{         id:tradeRecordList         ListElement{tradeTimeRecord:"00/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"01/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"02/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"03/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"04/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"05/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"06/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"07/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"08/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"09/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"10/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"11/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"12/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"13/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"14/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"15/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"16/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"17/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"18/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"19/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}         ListElement{tradeTimeRecord:"20/10/13 08:00:59";tradeTerminalRecord:"XXXXXXXXXXXX";             tradeTypeRecord:"XXXXXXXXXXXXXX";tradeMoneyRecord:"20元"}     }
运行效果如下：