微信网页下拉刷新

原创 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高级完整自学视频教程免费下载 【具体帖...

微信小程序上拉加载,下拉刷新

  • 2016年11月22日 23:57
  • 8KB
  • 下载

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

SlidingLayout项目地址:HomHomLin/SlidingLayout简介:实现类似微信、QQ 浏览器中网页的上拉下拉弹跳效果和 iOS 的 UITableView (ListView)的...

ListView下拉刷新模仿微信眼睛

  • 2015年07月30日 16:13
  • 3.68MB
  • 下载

微信小程序列表的上拉加载和下拉刷新的实现

微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Androi...

仿微信、QQ、网易新闻 UI 下拉刷新

  • 2016年03月30日 14:40
  • 1.78MB
  • 下载

微信小程序开发之 下拉刷新,上拉加载更多

本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多 先开看一下界面    大致如此的界面吧。 这个Demo使用了微信的几个Api和事件,我先列出来。 1.wx.r...

微信小程序实战篇-下拉刷新与加载更多

哈喽,大家好,看这标题是不是有点奇怪,你们期盼的微信小程序实战篇-电商(三)没出现,我是这么想的,因为电商里面的内容有很多,如何我只是以一二三那样命名的话,不方便你们查看每篇文章讲解的内容,所以我就换...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:微信网页下拉刷新
举报原因:
原因补充:

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