微信网页下拉刷新
在进行微信网页开发中,我们需要使用到手指向上滑动至底部自动加载数据,
<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代表数据总页数和每次加载多少数据 可在后台传过来
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_32722239/article/details/52385950
想对作者说点什么? 我来说一句

H5页面禁用微信浏览器下拉

2017年12月07日 692B 下载

没有更多推荐了,返回首页

不良信息举报

微信网页下拉刷新

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭