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. Spring AOP增强(Advice)

    Sring AOP通过PointCut来指定在那些类的那些方法上织入横切逻辑,通过Advice来指定在切点上具体做什么事情.如方法前做什么,方法后做什么,抛出异常做什么. Spring中有两种方式定义 ...

  2. jdbc元数据

    l  在jdbc中获取数据库的定义,例如:数据库.表.列的定义信息.就用到元数据. l  在jdbc中可以使用: 数据库元数据.参数元数据.结果集元数据 l  (元数据定义相关api,  ..Meta ...

  3. javascript循环语句

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 代码实现程序启动后, 可以从键盘输入接收多个整数, 直到输入quit时结束输入. 把所有输入的整数倒序排列打印

    package com.loaderman.test; import java.util.Comparator; import java.util.Scanner; import java.util. ...

  5. Angularjs E2E test Report/CoverageReport

    前端Angularjs是一个很热门的框架,这篇是学习基于Angularjs的nodejs平台的E2E测试报告和E2E JS覆盖率报告.用到的都是现有的工具,只是一些配置的地方需要注意. 环境前提: 1 ...

  6. 集群中配置多台机器之间 SSH 免密码登录

    集群中配置多台机器之间 SSH 免密码登录 问题描述 由于现在项目大多数由传统的单台机器部署,慢慢转变成多机器的集群化部署. 但是,这就涉及到机器间的 SSH 免密码互通问题. 当集群机器比较多的时候 ...

  7. 利用Bag中的getCount()方法统计list集合中重复元素

    实际应用场景:从Excel导入数据时,存在某个标识符相同的多条数据,需要进行合并,因此需要统计重复元素,可以利用Bag包下的getCount()进行统计,代码如下: package test.com. ...

  8. php下关于字符串与数组的相互转换的函数

    public static function string2array($tags)    {        return preg_split('/\s*,\s*/',trim($tags),-1, ...

  9. nginx配置443端口

    参照地址:    https://www.cnblogs.com/tianhei/p/7726505.html       https://blog.csdn.net/cjs5202001/artic ...

  10. Vue中的slot

    个人理解:是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参: Slot的通俗理解 是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自 ...