zoukankan      html  css  js  c++  java
  • 页面回滚效果(滚动条到底部刷新页面)

    jquery滚动监听方法如下,

    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if(scrollTop + windowHeight == scrollHeight){
          alert("you are in the bottom");
        }
      });

    在实际的应用中,比如微博、qq空间等有这样的效果,打开首页默认显示几条,但我们的鼠标将滚动条下滑到底部时,加载出更多的内容,这个方法是如何实现的?

    通关的demo,simple-weibo中有这样一个要求,个人采用了ajax及jquery的scroll方法一起实现了这个效果,思路如下:
    1、设置滚动条监听事件,如上所示
    2、当scrollTop + windowHeight == scrollHeight时,alert替换成ajax方法,从后端返回需要吐出的数据,
    具体如下

    $.ajax({ 
      type: 'POST',
      url: "pub.php",

      data:id,  //比如首页默认显示10条,从param中获取参数,比如设为1、2、3表示滚动到底部,sql跳过10条取n条。

      success: function(data) { 
        $("#moreinfo").before(data);

        history.go(0);   //使得显示的是数据库中的数据
      },
      fail: function() {
        alert('请求失败!');
      }
    });

    因为不需要数据,所以ajax方法中没有提到data,success中的data是从pub.php中返回的数据。

    过程中遇到了问题,因为每次到底部时,只加载出了一条消息,因为用的是ajax,此处的DOM是假数据,并未真正存在与HTML中,只有刷新了,显示的才是从数据库中取出的数据。另外,因为默认显示的列表中,为了使得每次加载出的数据都从最下面显示,我们可以建一个<div id="moreinfo"></div>但是什么也不写,只是为吐数据的before方法提供支撑。具体原因可以理解!

  • 相关阅读:
    js循环遍历弹框,先弹出第一个之后逐步弹出第二个。。
    js获取字符串的字节长度
    tomcat启动报错:Address already in use: JVM_Bind
    自整理的jquery.Validate验证表达式
    jerichotab 初始化页面显示tab页中的第一个
    POST提交大量数据,导致后面数据丢失
    IDEA启动时自动报Plugin Error错误
    apiCloud检出代码出现以下图示错误:
    javascript的一些在IE下不支持的函数小结
    The Nature of Recognition
  • 原文地址:https://www.cnblogs.com/zhhq/p/6143586.html
Copyright © 2011-2022 走看看