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. mysql 查询锁表,解锁

    //1.查看当前数据库锁表的情况   SELECT * FROM information_schema.INNODB_TRX;   //2.杀掉查询结果中锁表的trx_mysql_thread_id ...

  2. LC 711. Number of Distinct Islands II

    Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land) conn ...

  3. NavMenu 导航菜单

    顶栏 适用广泛的基础用法. 导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式.另外,在菜单中通过submenu组件可以生成二级菜单.Menu 还提供了background-colo ...

  4. PHP中获取当前页面的完整URL、PHP URL处理、获取不带扩展名的文件名

    javascript实现: top.location.href 顶级窗口的地址this.location.href 当前窗口的地址 PHP实现 #测试网址: http://localhost/blog ...

  5. iOS开发之点击tabBarItem进行Push一个页面

    使用场景: 实现底部Tabbar两个TabBarItem,点击第二个跳转push到个人信息页面: 实现步骤: 首先设置UITabBarController的代理为appdelegate如下:myTab ...

  6. 【D3D12学习手记】The Swap Chain and Page Flipping

    为了避免动画中的闪烁,最好将整个动画帧绘制到称为后台缓冲区的屏幕外纹理(off-screen texture)中.一旦整个场景被绘制到给定动画帧的后缓冲区,它就作为一个完整的帧呈现给屏幕;以这种方式, ...

  7. 【转】HBase shell命令与 scan 过滤器

    Hbase 常用shell命令 https://www.cnblogs.com/i80386/p/4105423.html HBase基础之常用过滤器hbase shell操作 https://www ...

  8. SqlServer:SqlServer(数据库备份,数据文件迁移,增加数据库文件组,递归查询一周报送情况,查询近X天未报送单位,截断数据库日志,复制单个或多个数据库表到另一个数据库 )

    1.数据备份 ) ) ) )),'-','') ) SET @savePath = 'f:/DatabaseBackup/' DECLARE My_Cursor CURSOR FOR ( select ...

  9. Android开发 互相调用模式之提供扩展类

    此种方法适用于:比如你要让Android做一些事情,这些事用不到任何资源,在Android下用纯代码就能实现它,这样就可以在Android下写好,将它封装成一个方法,打成包按照下面的方式丢给Unity ...

  10. Angular中引入外部js的使用方式

    在Angular中我们或许会用到部分外部插件的时候,像Bootstrap,Jquery这些当然我们可以通过Npm安装包的形式引入,但是还有一些其它的js库需要引入的话,我们又应该怎样操作呢? 在这里做 ...