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

//首先需要监听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. 关于结构体的具体解说,C、C++中的差别

    1. C.C++内置的类型分两种,一种是基本数据类型.一种是复合数据类型.此处我们要讲的结构体便是复合数据类型. 先来讨论一下结构体存在的意义吧.或许你觉得主要的数据类型就够了,为什么还要有结构题这样 ...

  2. cocos2d-x 3.0 引用第三方库 及编译成apk时android mk文件写法

    cocos2d-x 3.0 中.假设你须要使用CocosStudio.Extensions扩展库 等等.都须要自己手动加入. 加入过程例如以下:(比方说如今我要加入libExtensions,libC ...

  3. VirtualBox中使用双网卡实现CentOS既能上网(校园网)也能使用SSHclient

    近期在虚拟机中使用linux操作系统,之前使用NAT方式上网,能够畅通无阻.可是使用SSHclient连接linux虚拟机就必须为其指定固定的IP地址.依照网上的配置方法使用桥接方式,这种方式是能够的 ...

  4. 基于SpringMVC框架使用ECharts3.0实现折线图,柱状图,饼状图,的绘制(上篇)

    页面部分 <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> ...

  5. java验证码图片

    package com.su.servlet; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; impor ...

  6. UICollectionViewController xcode6.1 自定义Cell

    本文转载至 http://blog.csdn.net/daleiwang/article/details/40423219 UICollectionViewContAutolayoutstoryboa ...

  7. 1507: [NOI2003]Editor

    1507: [NOI2003]Editor Time Limit: 5 Sec  Memory Limit: 162 MB Submit: 3535  Solved: 1435 [Submit][St ...

  8. hdfs namenode出错

    http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_design.html 健壮性 HDFS的主要目标就是即使在出错的情况下也要保证数据存储的可靠性.常见的三种出 ...

  9. spark集成hivecontext配置

    spark版本:spark-1.6.0-bin-hadoop2.6hive版本:hive 1.2.1 1.hive-site.xml<property>  <name>hive ...

  10. Hihocoder #1077 : RMQ问题再临-线段树(线段树:结构体建树+更新叶子往上+查询+巧妙使用father[]+线段树数组要开大4倍 *【模板】)

    #1077 : RMQ问题再临-线段树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上回说到:小Hi给小Ho出了这样一道问题:假设整个货架上从左到右摆放了N种商品,并 ...