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;

?>