jq上滑加载更多
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上滑加载更多的更多相关文章
- Android如何定制一个下拉刷新,上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- vue 上滑加载更多
移动端网页的上滑加载更多,其实就是滑动+分页的实现. <template> <div> <p class="footer-text">--{{f ...
- Android的ListView分页功能(上滑加载更多)
今天主要工作是将之前实现的各种ListView显示全部信息,优化成了每次加载几条数据,然后上滑的时候加载更多,底部显示一个进度条和一个文字提示,然后加载完毕后,将提示信息隐藏. 一边看教学视频一遍敲代 ...
- 移动端web页面上滑加载更多功能
背景介绍: 开发企业微信的一个应用,实现在企业微信中调用自己程序页面,页面加载多模块数据,向下滑加载更多,等等等等,一波三折 然后很早就成功了是这样实现的: html: <div id=&quo ...
- 使用jquery.more.js上滑加载更多
html: <div id="more"> <div class="single_item"> <div class=" ...
- 微信小程序上滑加载更多
onReachBottom: function () { var that = this var limit = that.data.limit var count = that.data.count ...
- APICloud 上滑加载更多
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- jquery 上滑加载更多
$(document).ready(function() { var totalPage = {$totalPage};//总页数 var page = {$page}; //起始页 var page ...
- 微信小程序 scroll-view 完成上拉加载更多
我们经常在软件客户端上看到这么一个功能,当我们阅读信息浏览到文章的末尾时,通常会加载出更多的信息.比如,我们在简书客户端上浏览推荐文章时,浏览到屏幕的末尾,此时又加载出了另一页的推荐文章,即实现了上拉 ...
随机推荐
- weblogic性能调优
1.设置java参数: a) 编辑Weblogic Server启动脚本文件: /user_projects/domains/Domain_jgbs/bin/startWebLogic.sh /use ...
- pycloudtag_wordcloud 中英文标签云
https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&shareId=400000000398 ...
- 手把手教你 iOS通过自己的服务器实现应用分发
第一步:打包ipa 1:可以是development.ad-hoc.enterprise任何一种打包方式,导出的ipa, 稍后会将安装包上传到服务器上. 2:如下图,箭头指的要打勾 3.点击下一步后出 ...
- js 中实现 汉字按拼音排序
let arr = ["贵州省", "江苏省", "江西省", "浙江省", "四川省", &quo ...
- SQL学习(一)相关基础知识
RDBMS基础知识 1.数据库是按照数据结构来组织.存储和管理数据的仓库:数据库是一些关联表的集合. 2.数据表是数据的矩阵,在一个数据库中的表看起来像一个简单的电子表格. 3.列:一列包含了相同的数 ...
- java+实现文件的上传和下载
项目截图 路径配置 将localhost:8080/up6全部替换为实际项目路径 使用mysql文件夹下的脚本创建数据表. 创建后可以在数据库中看到创建好的数据表 2.修改数据库连接 3.修改上传地址 ...
- iOS检测用户截屏, 并获取所截图片
// // ViewController.m // CheckScreenshotDemo // // Created by 思 彭 on 2017/4/25. // Copyright © 2017 ...
- spring-boot集成5:集成jrebel实现热加载
Why Jrebel? 使用jrebel可以方便的实现spring-boot项目的热部署,直接reload更改的class,无需重启,提升开发效率. 1.安装jrebel插件 在idea中安装jreb ...
- Asp.Net Core 反向工程
反向工程1.反向工程是实体类型类和一个基于数据库架构的 DbContext 类的基架的过程2.Scaffold-DbContext(数据库上下文脚手架) 使用Scaffold-DbContext ...
- JavaScript基础入门04
目录 JavaScript 基础入门04 JavaScript 对象 介绍 关于键名 对象的引用 语句和表达式需要注意的地方 对象属性常见的操作 with语句 JSON 特点 语法规则 JSON合法示 ...