jQuery 实现上拉刷新，下拉加载

jQuery 实现上拉刷新，下拉加载

1.html部分

 <div class="container">
            <div class="scroll">
                <div class="status">
                    <p>下拉刷新</p>
                </div>
                <ul id="items">
                </ul>
            </div>
        </div>

这块是需要display = none

<ul id="itemTemplate" style="display: none;">
    <li class="li">
        <h5>我是谁我在哪我在干嘛</h5>
        <div class="overflow mt10">

        </div>
    </li>
</ul>

2.js部分

var ctx = "http://localhost:8090";
    $(function () {
        var searchName = getQueryVariable('searchName');
        getSupplierList(decodeURI(decodeURI(searchName)));
    });
    var page = 1;
    var limit = 15;

    // 从后台获取数据
    function getSupplierList(searchName) {
        var url = ctx + '/wx/getSupplierList';
        var s = $.ajax({
            url: url,
            data: {
                searchName: searchName,
                page: page,
                limit: limit
            },
            type: "post",
            dataType: "json",
            scriptCharset: 'utf-8',
            success: function (res) {
                if (res.code == 0) {
                    var list = res.data;
                    if (list) {
                        var items = null;
                        console.log(list)
                        $.each(list, function (index, item) {
                            items = $("#itemTemplate").find("li:eq(0)").clone();
                            items.show();
                            items.find("h5").html(item.contractTitle);
                            items.find(".mt10").html('<span class="timeIcon fl"><i><img src="img/time.png"></i>' + item.col10 + '</span>');
                            $("#items").append(items);
                        });
                    }
                }
            }
        });
    }


    // 获取 url 上的参数
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

3.上拉刷新

// ------------------上拉刷新--------------------------
    //定义的全局变量
    var disY, startY, endY;
    //触摸事件开始时触发
    $('.scroll').on('touchstart', function (e) {
        console.log(e);
        startY = e.originalEvent.changedTouches[0].pageY;
    });
    //触摸事件移动中时触发
    $('.scroll').on('touchmove', function (e) {
        endY = e.originalEvent.changedTouches[0].pageY;
        disY = endY - startY;
        if (disY > 30) {
            $('.status').css({
                display: 'block',
                height: disY + 'px',
            });
        }
    });
    //触摸事件结束时触发
    $('.scroll').on('touchend', function (e) {
        endY = e.originalEvent.changedTouches[0].pageY;
        disY = endY - startY;
        if (disY > 72) {
            //定义一个定时器，返回下拉到一定的高度
            var timer = setInterval(function () {
                disY -= 13;
                if (disY <= 60) {
                    $('.status').css({
                        height: 52 + 'px',
                    });
                    clearInterval(timer);
                    refresh();
                }
                $('.status').css({
                    height: disY + 'px',
                });
            }, 75);
        }
    });

    //请求刷新数据
    function refresh() {
        var t = setTimeout(function () {
            /*for (var i = 0; i < 13; i++) {
                $('.scroll ul').append('<li>' + '添加的数据:' + parseInt(i + 1) + '</li>');
            }*/
            page ++;
            var searchName = getQueryVariable('searchName');
            getSupplierList(decodeURI(decodeURI(searchName)));

            $('.status').css({
                display: 'none',
                height: 0
            });
            clearTimeout(t)
        }, 3000);
    }

4.下拉加载

//--------------下拉加载更多---------------
    //获取滚动条当前的位置
    function getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }

    //获取当前可视范围的高度
    function getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
        } else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        }
        return clientHeight;
    }

    //获取文档完整的高度
    function getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }

    //滚动事件触发
    window.onscroll = function () {
        if (getScrollTop() + getClientHeight() === getScrollHeight()) {
            console.log('在这里加载数据咯！');
        }
    };