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. Java-内存模型(JSR-133)

    Java 内存模型(Java Memory Model,JMM)看上去和 Java 内存结构(JVM 运行时内存结构)差不多,但这两者并不是一回事.JMM 并不像 JVM 内存结构一样是真实存在的,它 ...

  2. LC 890. Find and Replace Pattern

    You have a list of words and a pattern, and you want to know which words in words matches the patter ...

  3. RN在Mac环境下开发环境搭建

    1.推荐使用Homebrew来安装 Node 和 Watchman.在命令行中执行下列命令安装: brew install node brew install watchman 如果你已经安装了 No ...

  4. ConstraintLayout的简单介绍和使用

    ConstraintLayout是Android Studio 2.2中主要的新增功能之一,也是Google在去年的I/O大会上重点宣传的一个功能.我们都知道,在传统的Android开发当中,界面基本 ...

  5. Alert 警告

    基本用法 页面中的非浮层元素,不会自动消失. Alert 组件提供四种主题,由type属性指定,默认值为info. <template> <el-alert title=" ...

  6. Servlet(3):Cookie

    概念 Cookie是存储在客户端计算机上的文本文件,并保留了各种跟踪信息.Java Servlet支持HTTP Cookie. 识别返回用户包括三个步骤: (1) 服务器脚本向浏览器发送一组Cooki ...

  7. Python简单网络爬虫实战—下载论文名称,作者信息(下)

    在Python简单网络爬虫实战—下载论文名称,作者信息(上)中,学会了get到网页内容以及在谷歌浏览器找到了需要提取的内容的数据结构,接下来记录我是如何找到所有author和title的 1.从sou ...

  8. 1031: [编程入门]自定义函数之字符串反转(python)

    问题 1031: [编程入门]自定义函数之字符串反转 时间限制: 1Sec 内存限制: 128MB 提交: 7225 解决: 3331 题目描述 写一函数,使输入的一个字符串按反序存放,在主函数中输入 ...

  9. Excel随机数相关

    基本函数 RAND() 函数:自动生成一个[0,1)的平均分布随机数(依重新计算而改变) RANDBETWEEN(bottom,top) :返回一个介于指定数字直接的随机数,不会自动改变 INT(nu ...

  10. IP划分

      30.112.0.0 255.255.224.0/ 30.112.32.0 255.255.248.0 30.112.36.0 255.255.252.0 30.112.38.0 255.255. ...