微信网页下拉刷新

最新推荐文章于 2024-07-20 18:41:03 发布

叶半仙

最新推荐文章于 2024-07-20 18:41:03 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_32722239/article/details/52385950

版权

在进行微信网页开发中，我们需要使用到手指向上滑动至底部自动加载数据，

<div id="tipDiv" style="display: none;text-align: center;">
    <h1>加载中…</h1>
    </div>
<div id="tipDiv2" style="display: none;text-align: center;">
    <h1>数据已全部加载完毕</h1>
</div>

我们需要在自己的页面当中添加这样两个DIV DIV样式可自定义，这只是做个示范。

var page = 1;//页面全局变量
var flag = true;//自定义flag
//页面准备，当页面加载完成时，如数据小于当前页面大小，继续加载
$(document).ready(function () {
    var totalPage = $("#totalPage").val();
    var pageSize = $("#pageSize").val();
    if(page<$("#totalPage").val()&&$("#totalPage").val()>0) {
        if (($(window).scrollTop()) >= ($(document).height() - window.innerHeight) || $(document).height() == window.innerHeight) {

<span style="white-space:pre">	</span>//降频事件，防止滑动至低端多次加载数据
            if (flag) {
                $("#tipDiv").show();
                setTimeout(function () {
                    detailAjax(pageSize, totalPage);
                }, 1000);
                flag = false;
            }
        }
    }
    //滑动方法，当滑动到低端时自动加载数据
    $(window).scroll(function () {
        if(page==$("#totalPage").val()){


            $("#tipDiv2").show();
        }else if(page<$("#totalPage").val()) {
            if (($(window).scrollTop()) >= ($(document).height() - window.innerHeight) || $(document).height() == window.innerHeight) {
                $("#tipDiv").show();
                if(flag) {
                    setTimeout(function () {
                        detailAjax(pageSize,totalPage);
                    }, 1000);
                    flag = false;
                }
            }
        }
    });
});
//加载数据判断及请求ajax
function detailAjax(pageSize,totalPage) {
    if(page<totalPage) {
        if ((50+$(window).scrollTop()) >= ($(document).height() - window.innerHeight)||$(document).height()==window.innerHeight) {
            var startNum =$("#pageSize").val()*page;
            $.ajax({
                url:$ctx+'/user/addtransactionDetail.do',
                type:'post',
                data:{
                    "startNum":startNum,
                    "pageSize":$("#pageSize").val()
                },
                dataType:'json',
                success:function (data) {
                    var json = eval(data);
                    addDetail(json);
                    $("#tipDiv").hide();
                    flag=true ;
                }
            });
        }
    }
    page++;
}
//解析json并在页面输出数据
function addDetail(json) {}

totalpage和pageSize代表数据总页数和每次加载多少数据可在后台传过来