QtQuick 上拉加载的实现

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
id:root
property alias listmodel: listmodel
ListModel{
id:listmodel
Component.onCompleted: {
//添加2张本地图片  实际情况中  应该在服务器获取整个页面高度的图片数量
getSrc()
}
}
property int  readCout: 4//一次性从服务器读取的数量
ListView{
id:listview;
anchors.fill: parent
model:listmodel
clip: true
onCurrentIndexChanged: {
console.log(currentIndex)
}

delegate: Image{
property int  bw: 40
property int  bh: 40
id:img
width: bw
height: bh
source: model.pic
anchors.horizontalCenter: parent.horizontalCenter

onStatusChanged: {
if(status===Image.Ready)
{

by.running=false;
//设置了高度 调整界面大小会不伸缩 仅针对移动平台写法
bw = root.width*0.8
bh=img.sourceSize.height/img.sourceSize.width *width
}
}

//当从服务器读取图片列表的时候 只显示相对第一行 当有图片的时候 当做加载等待
BusyIndicator{
id:by
visible: model.vs
running: img.status==Image.Ready?false:true
anchors.centerIn: parent
width: visible?50:0
height:  visible?50:0

}

}

onFlickStarted: {

console.log(originY + ","+contentY +","+contentHeight+","+height+",");
if((contentY-originY +height*0.5)>(contentHeight-height))
{
getSrc();
}

}
}

property bool geting: false//防止同时获取数据
function  getSrc()
{
if(geting==true)
{
return;
}
geting= true;

var _begin=listmodel.count;
for(var z =0;z<readCout;z++)
{
if(z==0)
{
listmodel.append({"pic":"",vs:true});
}else{
listmodel.append({"pic":"",vs:false});
}

}

getimage(_begin,function(_src){

for(var x=0;x<readCout;x++)
{
listmodel.get(_begin + x).vs=true
}
loadimage(_begin,_src)
geting= false;

})
}

function  loadimage(_begin,___src)
{

console.log(___src)
if(___src=="erro")//如果没有图片了
{
listmodel.remove(_begin,readCout)
return;
}
var obg = JSON.parse(___src);
for(var x=0;x<obg.length;x++)
{
console.log("obgL:"+obg[x])
listmodel.get(_begin + x).pic="http://192.168.0.105/"+obg[x]
}
if(obg.length<readCout)//如果有图片 但是数量不是预期的那么多 就删除多余的
{
for(var xx=0;xx<readCout-obg.length;xx++)
{
listmodel.remove(listmodel.count-1)
}

}

}

//服务器获取图片名称 可以附加其他信息封装成json
//back  接收到服务器反馈后的回调函数 异步
function  getimage(data,back)
{
console.log("getimage")
var x = new XMLHttpRequest();
x.open("POST","http://192.168.0.105//mycode//test//getimage.php");
x.onreadystatechange =function()
{

if(x.readyState == 4) {

if(x.status == 200) {

console.log("The server replied with: " + x.responseText);
//登录状态不正常停止计时器 告知用户
back(x.responseText);

}else
{
back("erro");
}

};
}

x.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
x.send("imageindex="+data+"&cout="+readCout);

}
}

<?php
// 随机等待一些时间  模拟网络不好
$T = rand(1,1000000*2);
usleep($T);
$img = $_POST['imageindex'];
$cout = $_POST['cout'];
if ($img>5)
{
echo "erro";
return ;
}
$arr = array ();
for ($x=0;$x<$cout;$x++)
{
if($img+$x>5)
{
break;
}
$arr[$x]=$img+$x . ".png";

}

if(count($arr)==0)
{
echo "erro";
return ;
}
$str=json_encode($arr);
echo  $str;

?>