微信网页下拉刷新

原创 2016年08月31日 15:57:25
在进行微信网页开发中,我们需要使用到手指向上滑动至底部自动加载数据,
<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代表数据总页数和每次加载多少数据 可在后台传过来
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

别人的链接非不是微信官网内部链接下拉却显示网页由mp.weixin.qq.com提供的原因以及实现

这个其实就是个障眼法,代码已经贴在下面了,锅锅我一开始也是差点被骗到了,建议不要乱用免得被微信官方发现了告你我可不负责,哈哈 【来源】:php高级完整自学视频教程免费下载 【具体帖...

SlidingLayout-实现类似微信中网页的上拉下拉弹跳效果

SlidingLayout项目地址:HomHomLin/SlidingLayout简介:实现类似微信、QQ 浏览器中网页的上拉下拉弹跳效果和 iOS 的 UITableView (ListView)的...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)