//下拉加载在移动端会经常使用,有些小伙伴不清楚一些原理下面就简答的介绍一下

//首先需要监听window的滚动事件,下拉其实就是在监听window滚动事件
var pageNum = 1;//分页第一页
var pageTotal = 0;//默认总页数
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();//这一步是计算已经卷进去滚动条的的高度
var scrollHeight = $(document).height();//这个就算当前页面的总高度
var windowHeight = $(this).height();//这个是当前window也就是浏览器的高度
if (scrollTop + windowHeight == scrollHeight) {//如果这两个相等,不就意味着已经到了页面底部了吗?
pageNum += 1;//这是一个全局的变量,页面滑到底部就加一
next(pageNum);//完了执行你请求数据的函数
}
});
//说明:分页是有总页数的,当超过了总页数那么久不去请求,所以你在next()做一些处理比如:你将第一次获取的数据中有总页数的这个参数,那么你赋值给
 pageTotal ,那么以后的下拉中你可以
function next(pageNum) {
if (pageTotal != 0) {
if (pageNum > pageTotal) {
return false//当前页数大于总页数,就return
};
.......
}

web移动端下拉加载数据简单实现的更多相关文章

  1. iscroll5 上拉,下拉 加载数据

    我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...

  2. Jquery手机下拉刷新,下拉加载数据

    一.Jquery手机下拉刷新,下拉加载数据.附加有源码 <!DOCTYPE html> <html> <head> <title>手机</titl ...

  3. 基于Zepto移动端下拉加载(刷新),上拉加载插件开发

    写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...

  4. 关于MJRefresh的下拉加载数据bug

    当没有更多数据的时候显示NoMoreData 我的理解是先结束刷新再显示没有更多 今天之前一直没发现有问题 贴之前的代码 [self.collectionView reloadData]; [self ...

  5. 手机网站下拉加载数据js(简单版)

    加载内容的地方html <div class="bgcolor_f0 clearfix"> <div class="recharge"> ...

  6. iscroll5 版本下的 上拉,下拉 加载数据

    上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码. <section id="downwraper" class="nodeBottom bot0 bgf ...

  7. juqery 下拉加载数据

    html  代码  一开始是需要显示的第一页 <div class="hot-product f15 fixed-Width clearfix" id="goods ...

  8. vue-better-scroll实现移动端下拉加载组件

    1.下载安装better-scroll npm i -S better-scroll 1.1安装完成之后,打开pacaage.json文件查看,是否有(better-scroll) "dep ...

  9. php ajax 下拉加载数据

    视图 <html> <head> <title>健康知识</title> <script type="text/javascript&q ...

随机推荐

  1. 面向对象 委托变量和this的使用

    委托方法: this的使用:

  2. 【转载】5种网络IO模型

    同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问题其实不同的人给出 ...

  3. Nova镜像使用方法

    Nova中的虚拟机可以从镜像.卷.卷快照等启动,一般装完OpenStack时,环境中既没有镜像也没有卷,这时候往往 需要上传一些已有的镜像,或者上传ISO文件来安装虚拟机系统.这个文档主要描述如何上传 ...

  4. [Pyhton]weakref 弱引用

    文档中的解释: https://docs.python.org/2/library/weakref.html wiki 中的解释: 在计算机程序设计中,弱引用.与强引用相对.是指不能确保其引用的对象不 ...

  5. CodeChef - PRIMEDST Prime Distance On Tree 树分治 + FFT

    Prime Distance On Tree Problem description. You are given a tree. If we select 2 distinct nodes unif ...

  6. hadoop yarn namenode datanoe 启动异常问题解决 分析日志

    cat logs/hadoop-root-datanode-hadoop1.log ********************************************************** ...

  7. (28)java web的hibernate使用

    Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernate可以自动生成SQL语句,自 ...

  8. ⭐register_chrdev、register_chrdev_region以及alloc_chrdev_region之间的区别

    register_chrdev:Linux2.6.30之前所用,不用定义cdev:但 如果是register_chrdev 注册的话,这个时候,分配的次设备号,是从0~255,这样子的话,就分配的范围 ...

  9. import data from excel to sql server

    https://www.c-sharpcorner.com/article/how-to-import-excel-data-in-sql-server-2014/ 需要注意的是,第一次是选择sour ...

  10. @Data 注解在实体类的使用可省去生成GET,SET方法

    你有没有觉得在每个实体类中都要生成get,set方法很麻烦, 要是需求的变化,需要再加一个字段,添加属性后则又要添加其get,set方法 现有一个很好用的注解能解决这个麻烦 1,idea中装上 lom ...