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

//首先需要监听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. Gas Station,转化为求最大序列的解法,和更简单简单的Jump解法。——贪心、转化

    Gas Station There are N gas stations along a circular route, where the amount of gas at station i is ...

  2. 腾讯云图片鉴黄集成到C# SQL Server 怎么在分页获取数据的同时获取到总记录数 sqlserver 操作数据表语句模板 .NET MVC后台发送post请求 百度api查询多个地址的经纬度的问题 try{}里有一个 return 语句,那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行,什么时候被执行,在 return 前还是后? js获取某个日期

    腾讯云图片鉴黄集成到C#   官方文档:https://cloud.tencent.com/document/product/641/12422 请求官方API及签名的生成代码如下: public c ...

  3. android-auto-scroll-view-pager

    https://github.com/eltld/android-auto-scroll-view-pager

  4. java远程调用rmi入门实例

    RMI是Java的一组拥护开发分布式应用程序的API.RMI使用Java语言接口定义了远程对象,它集合了Java序列化和Java远程方法协议(Java Remote Method Protocol). ...

  5. Spark 学习笔记:(四)MLlib基础

    MLlib:Machine Learning Library.主要内容包括: 数据类型 统计工具 summary statistics correlations stratified sampling ...

  6. bash命令中的两个横

    它是一种标记.命令中的连续的两个横表明选项已经结束了,两个横后面的内容就是参数了,不再是选项了.

  7. Wordpress播客网站搭建

  8. mysql 数据库连接

    1.需要mysql驱动包:mysql-connector-java-5.1.7-bin.jar 2. package com.jmu.ccjoin.web.controller; import jav ...

  9. 小玩Spring Boot

    Spring Boot是Spring Mvc的升级版 号称是替代者 也是微服务的微框架基础 有3启动方式 用IntelJ IDEA 生成spring boot工程 1.有个入口类 可以直接run as ...

  10. 序列流、对象操作流、打印流、标准输入输出流、随机访问流、数据输入输出流、Properties(二十二)

    1.序列流 * 1.什么是序列流 * 序列流可以把多个字节输入流整合成一个, 从序列流中读取数据时, 将从被整合的第一个流开始读, 读完一个之后继续读第二个, 以此类推.* 2.使用方式 * 整合两个 ...