1. 程式人生 > >H5手機端下拉載入資料的實現

H5手機端下拉載入資料的實現

<script>
    var orderData = {
        "items": [],
        "pageNo":1,
        "pageSize":4
    }
    var vue = new Vue({
        el:"#itemsDiv",
        data:orderData
    });

    list();
    function list() {
        Common.getRemote({
            type: "GET",
            url: basePath +"/bss/ord/sendStaHistoryList",
            data: {"pageNo":orderData.pageNo,"pageSize":orderData.pageSize},
            dataType:"json",
            async: true,
            success: function (data) {
                if (data != null && data.json.success) {
                    //判斷介面返回的陣列中有無資料
                    if(data.json.result.items!=null){
                        if(orderData.items==''||orderData.items==null){//第一頁第一次載入
                            orderData.items = data.json.result.items;
                        }else{//下拉載入數組合並
                            orderData.items=orderData.items.concat(data.json.result.items);
                        }
                    }
                } else {
                    alert(data.msg);
                }
            },
            error: function (res) {

            }
        });
    }

    function orderDetails(e){
        console.log($(e).attr('rel'));
        LoadingTip.openUrl("${pageContext.request.contextPath}/bss/ord/ordDetails?ordPk="+$(e).attr('rel'));
    }


    //下拉載入資料
    $(window).bind("scroll", function () {
        if(getScrollHeight() == getDocumentTop() + getWindowHeight()){
            // alert("滑到底部");
            orderData.pageNo=orderData.pageNo+1;
            list();
        }
    });



    //文件高度
    function getDocumentTop() {
        var scrollTop =  0, bodyScrollTop = 0, documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        console.log("scrollTop:"+scrollTop);
        return scrollTop;
    }

    //可視視窗高度
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        console.log("windowHeight:"+windowHeight);
        return windowHeight;
    }

    //滾動條滾動高度
    function getScrollHeight() {
        var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        console.log("scrollHeight:"+scrollHeight);
        return scrollHeight;
    }
</script>

部分轉自https://blog.csdn.net/xiangyihu/article/details/53781081