微信网页下拉刷新

原创 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代表数据总页数和每次加载多少数据 可在后台传过来
版权声明:本文为博主原创文章,未经博主允许不得转载。

H5在微信公众号的下拉刷新实现

由于项目需要在微信公众号做“健康资讯”相关的,所以会用到下拉刷新,可是使用的原生H5做页面,不过希望能够做到和app原生一样的下拉刷新效果,然后在网上找了找H5下拉刷新相关的资料,具体有:Iscrol...
  • zl544434558
  • zl544434558
  • 2015年12月25日 11:23
  • 7262

微信小程序 scroll-view下拉刷新

需求描述: 1.首先我的scroll-view部分是嵌套在template内 2.应用template的页面顶部还有一个日期选择picker且位置固定 3.下拉刷新当前页面template.wx...
  • xiaochun365
  • xiaochun365
  • 2017年05月02日 13:02
  • 2291

关于微信小程序下拉刷新组件加载图片(三个小点)不显示的问题

前话 相信大家在开发微信小程序的时候都有遇到过这样一个问题,为什么我在下拉刷新的时候没有任何加载中的图标显示,但其他人的会有三个黑色的点点呢? 以下为没有显示任何加载图标的下拉刷新样式 ...
  • jian_xi
  • jian_xi
  • 2017年07月31日 23:02
  • 2327

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

微信小程序下拉刷新上拉加载的两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性...
  • jian_xi
  • jian_xi
  • 2017年07月31日 23:06
  • 849

微信小程序入门五上滑加载下拉刷新

之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的。这章介绍加载和刷新。 效果图: 先介绍在IDE中,怎么模拟上滑这个操作。开始我是用鼠标点击文章列表,然后先上移动。结果一直没有结果,以...
  • qq_19558705
  • qq_19558705
  • 2017年03月11日 11:36
  • 14174

微信中iscroll5下拉刷新的应用

最近在微信中做一个应用,要用到滚动刷新功能,先找了个iscroll4,配合一个辅助类用的还不错,但是在android下面很卡,于是换iscroll5,结果各种坑啊,上网搜索了一下,发现这位仁兄的文章h...
  • nevermad
  • nevermad
  • 2016年05月10日 15:23
  • 3036

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

微信小程序中的下拉刷新,上拉加载的功能在所难免,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: ...
  • qq_31383345
  • qq_31383345
  • 2016年11月23日 00:02
  • 11761

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

哈喽,大家好,看这标题是不是有点奇怪,你们期盼的微信小程序实战篇-电商(三)没出现,我是这么想的,因为电商里面的内容有很多,如何我只是以一二三那样命名的话,不方便你们查看每篇文章讲解的内容,所以我就换...
  • u012927188
  • u012927188
  • 2017年06月17日 10:59
  • 15187

微信小程序之上拉加载和下拉刷新 —— 微信小程序教程系列(18)

在微信小程序上实现下拉刷新、上拉加载的效果 使用系统提供的onPullDownRefresh、onReachBottom这2个事件, 前提需要在app.json或page.json配置文件中设...
  • michael_ouyang
  • michael_ouyang
  • 2017年02月15日 19:48
  • 4379

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

微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能。  先开看一下界面 1.wx.request ...
  • yelin042
  • yelin042
  • 2017年05月08日 21:11
  • 1286
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:微信网页下拉刷新
举报原因:
原因补充:

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