html 结构

  <div id="main">
<ul class="order-list" id="list_box">
// li
</ul>
      
         <div id="getmore">
正在加载。。。
         </div>
</div>

script部分

 var page = 1, //分页码
off_on = false, //分页开关
timers = null; //定时器
var p = 0, t = 0;
//加载数据
var LoadingDataFn = function () {
$("#getmore").show()
var dom = '';
for (var i = 0; i <; i++) {
dom += '<li>'+i+'</li>';
}
$("#getmore").hide() $('#list_box').append(dom);
off_on = true;
}; //初始化, 第一次加载
$(document).ready(function () {
LoadingDataFn();
}); $(window).scroll(function () {
//当时滚动条离底部60px时开始加载下一页的内容
p = $(this).scrollTop(); if (t <= p) {//下滚
//
if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
clearTimeout(timers);
timers = setTimeout(function () {
page++;
console.log("第" + page + "页");
LoadingDataFn()
}, 300);
}
} else {//上滚
//
}
setTimeout(function () { t = p; }, 0);
});

jq上滑加载更多的更多相关文章

  1. Android如何定制一个下拉刷新,上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  2. vue 上滑加载更多

    移动端网页的上滑加载更多,其实就是滑动+分页的实现. <template> <div> <p class="footer-text">--{{f ...

  3. Android的ListView分页功能(上滑加载更多)

    今天主要工作是将之前实现的各种ListView显示全部信息,优化成了每次加载几条数据,然后上滑的时候加载更多,底部显示一个进度条和一个文字提示,然后加载完毕后,将提示信息隐藏. 一边看教学视频一遍敲代 ...

  4. 移动端web页面上滑加载更多功能

    背景介绍: 开发企业微信的一个应用,实现在企业微信中调用自己程序页面,页面加载多模块数据,向下滑加载更多,等等等等,一波三折 然后很早就成功了是这样实现的: html: <div id=&quo ...

  5. 使用jquery.more.js上滑加载更多

    html: <div id="more"> <div class="single_item"> <div class=" ...

  6. 微信小程序上滑加载更多

    onReachBottom: function () { var that = this var limit = that.data.limit var count = that.data.count ...

  7. APICloud 上滑加载更多

    <!DOCTYPE html><html>        <head>        <meta charset="UTF-8">  ...

  8. jquery 上滑加载更多

    $(document).ready(function() { var totalPage = {$totalPage};//总页数 var page = {$page}; //起始页 var page ...

  9. 微信小程序 scroll-view 完成上拉加载更多

    我们经常在软件客户端上看到这么一个功能,当我们阅读信息浏览到文章的末尾时,通常会加载出更多的信息.比如,我们在简书客户端上浏览推荐文章时,浏览到屏幕的末尾,此时又加载出了另一页的推荐文章,即实现了上拉 ...

随机推荐

  1. 3709: [PA2014]Bohater

    3709: [PA2014]Bohater 或者:Bohater 题解 好狠啊这个题 z 要开 long long ,可能算掉血回血的时候会爆 long long 吧 首先把能回血的怪打死(不然你后面 ...

  2. yum源问题

    配置本地yum源 1.使用工具将iso文件上传到操作系统,或者直接挂载iso文件 2.配置yum #cd /etc/yum.repos.d/ 删除多余的repo文件 # vi /etc/yum.rep ...

  3. adb shell am start -W查看APP启动时间(优化冷启动)

    ThisTime:最后一个启动的Activity的启动耗时: TotalTime:自己的所有Activity的启动耗时: WaitTime::ActivityManagerService启动App的A ...

  4. Java静态函数、父类、子类执行顺序

    package class_test; /** * 静态函数.父类.子类执行顺序 * @author root * */ public class Test { public static void ...

  5. java:常见问题(解决获取properties乱码,解决poi自适应宽度)

    1.解决获取properties乱码 File cf = new File("D:\\app\\java_jar\\config.properties"); String[] pa ...

  6. Linux增加虚拟内存方法

    例如增加2G虚拟内存,操作如下: [root@gamedb ~]# free -m[root@gamedb tmp]# dd if=/dev/zero of=/tmp/big_swap bs=1024 ...

  7. 山东省第十届ACM省赛参赛后的学期总结

    5.11,5.12两天的济南之旅结束了,我也参加了人生中第一次正式的acm比赛,虽然是以友情队的身份,但是我依旧十分兴奋. 其实一直想写博客来增加自己的能力的,但是一直拖到现在,正赶上老师要求写一份总 ...

  8. redis缓存服务器

    1.什么是redis? Redis 是一个基于内存的高性能key-value数据库. 2.使用redis的好处? 速度快,因为数据存在内存,类似hashmap,hashmap的优势就是查找和操作的时间 ...

  9. java 数组学习

    遍历数组 --- for和foreach int[][] A = {{2,4},{3,5}}; int i = 0; for (int[] is : A) { i++; int j = 0; for ...

  10. 【Python开发】Python中的class继承

    继承是面向对象的重要特征之一,继承是两个类或者多个类之间的父子关系,子进程继承了父进程的所有公有实例变量和方法.继承实现了代码的重用.重用已经存在的数据和行为,减少代码的重新编写,python在类名后 ...