zoukankan      html  css  js  c++  java
  • 下拉加载更多内容(滚动加载)

      最近写项目,要求实现滚动条滚动到底部的时候请求加载更多的数据。要实现此功能首先想到的就是scroll事件,经过查阅资料终于实现此功能,具体原理如下:

    首先需要给div加scroll事件,监听滚动条滚动动作。滚动加载的原理:当滚动条的高度加上 滚动条到div顶部的高度 等于div的可滚动高度时,说明滚动条到底部了,此时便可以触发向服务端请求数据的ajax请求了。

      判断滚动条是否滚动到底部:

    this.scrollHeight<=$(this).scrollTop()+$(this).height();

    注:如果等滚动条滚动到底部时再加载,会影响用户的体验。因为一般动态加载的时候都需要向服务端请求资源,这时需要时间。一个更佳的方式是:当滚动条距离底部一定距离(C)时,就开始动态加载即向服务器请求资源。也就是预加载,预读取。代码即:

    this.scrollHeight-C ==$(this).scrollTop()+$(this).height();

    完整的滚动加载代码即:

    $("滚动区域ID").unbind("scroll").bind("scroll", function(e){  
         var sum = this.scrollHeight;  
         if (sum <= $(this).scrollTop() + $(this).height()) {  
            $.ajax({获取数据的逻辑代码})
          }  
     });

    注:该方法在使用之前首先需要引入jQuery.js;

    $(this).unbind('scroll').bind('scroll',function(){})这样写是为了避免重复绑定。

  • 相关阅读:
    [转]Splay算法
    [转]模拟退火算法
    [转]九种背包问题
    [转]C++实现平衡二叉树
    关于set
    __builtin_popcount
    为什么调用线程的join方法,等待的是执行join方法的线程
    volatile and 指令重排序 (单例模式用volatile来声明单例对象)
    线程池
    sts 转用 IDEA随记
  • 原文地址:https://www.cnblogs.com/nxl0908/p/7488970.html
Copyright © 2011-2022 走看看