下拉加载更多内容(滚动加载)

  最近写项目,要求实现滚动条滚动到底部的时候请求加载更多的数据。要实现此功能首先想到的就是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(){})这样写是为了避免重复绑定。

时间: 2024-08-26 05:36:57

下拉加载更多内容(滚动加载)的相关文章

ionic上拉加载更多当数据加载完没有下一页的时候我们需要显示一下&quot;没有更多了&quot;的友好提示

ionic上拉加载更多当数据加载完没有下一页的时候我们需要显示一下"没有更多了"的友好提示,但是在ionic里面遇到了一个问题.就是没有数据的时候我显示了没有更多的时候我的点击商品详情的事件失效了.怎么点都不触发 这到底怎么回事.简直是....遇到了各种奇葩问题.好了先不吐槽了.还是先解决问题吧. 我们看代码的时候很容易从因为这句话而出发.最开始的时候我是上拉第一页的时候.点击事件还有效.也就是上拉到最后一页点击事件才会失效.也就是isNext为false的时候.这时候我就会以为是ng

spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果

由于手机的携带的方便性和手机的越来越智能和移动网速越来越快,手机已经充斥着人们的生活.随着手机的流行, 移动应用也快速的火了起来比如微商城.手机网页.移动APP等等.既然移动应用这么火,我们今天来讲一下怎样实现在移 动网页中动态加载数据,那么我们怎么实现呢,是像pc网页那样,有个上一页和下一页还是其它的方式. 其实像pc网页那样上一页和下一页肯定不行的,手机屏幕很小,不好点击同时用户体验很差,今天来给大家介绍使用 spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果的方式

微信小程序之加载更多(分页加载)实例

业务需求: 列表滚动到底部时,继续往上拉,加载更多内容 必备参数: (1)pageindex: 1 //第几次加载 (2)callbackcount: 15 //需要返回数据的个数 其他参数: 根据接口的所需参数 实现原理: 当第一次访问接口时,传递2个必备参数(第1次加载,需要返回数据的个数为15个),和其他参数(需要搜索的字符串)给后台,后台返回第一次数据过来.在请求成功的的回调函数中,判断返回的数据是否>0,是,则取出数据,渲染视图层,并把"上拉加载"显示在列表底部:否,则

Android公共库——图片缓存 网络缓存 下拉及底部更多ListView 公共类

Android公共库--图片缓存 网络缓存 下拉及底部更多ListView 公共类 转载自http://www.trinea.cn/android/android-common-lib/ 介绍总结的一些android公共库,包含缓存(图片缓存.预取缓存.网络缓存).公共View(下拉及底部加载更多ListView.底部加载更多ScrollView.滑动一页Gallery).及Android常用工具类(网络.下载.shell.文件.json等等). TrineaAndroidCommon已开源,地

JavaScript下拉框去除重复内容

下拉框去除重复内容 <script type="text/javascript" src="http://www.joleye.com/libraries/javascript/jquery-1.5.1.min.js"></script> <a href="###">加载</a> <select> </select> <a href="###">

JavaScript解决select下拉框中的内容太长显示不全的问题

JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

Jquery鼠标滚动到页面底部自动加载更多内容,使用分页

https://www.cnblogs.com/qhorse/p/4717726.html index.php代码 [html] view plaincopy<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

UITableview优化随笔(1)-提高加载更多内容时的效率

UITableView上拉加载更多的功能相信很多应用都会用到,类似朋友圈.微博这样的应用,tableView中的数据内容高度根据内容来变化,同时需要加载大量的数据(上拉加载更多),要怎样才能保证加载数据时的页面流畅呢? UITableView的原理和使用,以及其滚动帧率的优化,不是本篇blog要讨论的问题,这个在网上能搜到大量资料,这里不再赘述. 一般在实现上拉加载更多数据的实现思路是: 1.获取新的数据 2.在当前dataArray中添加这些数据 3.在tableView上显示这些数据 其中第

【Java/Android性能优 7】Android公共库——图片缓存 网络缓存 下拉及底部更多ListView 公共类

本文转自:http://www.trinea.cn/android/android-common-lib/ 介绍总结的一些android公共库,包含缓存(图片缓存.预取缓存.网络缓存).公共View(下拉及底部加载更多ListView.底部加载更多ScrollView.滑动一页Gallery).及Android常用工具类(网络.下载.shell.文件.json等等). TrineaAndroidCommon已开源,地址为[email protected],欢迎Star或Fork^_* 示例APK