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;

?>