jQuery上拉加载更多
<header id="header">首 页</header> <section id="main">
<ul id="list_box"></ul>
</section> <footer id="footer">
<div class="active">首页</div>
<div>商城</div>
<div>其他</div>
<div>我的</div>
</footer>
* {
margin:0px;
padding:0px;
}
#header {
position:fixed;
top:0px;
left:0px;
width:100%;
height:50px;
background:#FAA732;
text-align:center;
line-height:50px;
color:white;
font-weight:bold;
}
#main {
position:absolute;
top:50px;
left:0px;
right:0px;
bottom:51px;
padding:10px;
overflow:auto;
}
#main li {
display:flex;
margin-bottom:10px;
padding:10px;
border-bottom:1px solid gray;
border-radius:4px;
background:#EEE;
}
#main li img {
flex:50px 0 0;
width:50px;
height:50px;
padding:4px;
border:1px solid green;
}
#main li span {
padding-left:4px;
line-height:24px;
}
#footer {
display:flex;
position:fixed;
left:0px;
bottom:0px;
width:100%;
height:50px;
border-top:1px solid gray;
background:#FAA732;
}
#footer div {
flex:;
text-align:center;
line-height:50px;
color:white;
font-weight:bold;
border-right:1px solid white;
}
#footer div:nth-child(4) {
border:none;
}
#footer .active {
background:#0086FF;
}
var page = 1, //分页码
off_on = false, //分页开关(滚动加载方法 1 中用的)
timers = null; //定时器(滚动加载方法 2 中用的) //加载数据
var LoadingDataFn = function() {
var dom = '';
for (var i = 0; i < 20; i++) {
dom += '<li><img src="http://www.jq22.com/img/cs/500x500a.png"/><span>上滑列加载表内容上滑列加载表内容上滑列加载表内容上滑列加载表内容</span></li>';
}
$('#list_box').append(dom);
off_on = true; //[重要]这是使用了 {滚动加载方法1} 时 用到的 ！！！[如果用 滚动加载方法1 时：off_on 在这里不设 true的话， 下次就没法加载了哦！]
}; //初始化， 第一次加载
$(document).ready(function() {
LoadingDataFn();
}); //底部切换
$(document.body).on('click', '#footer div', function() {
$(this).addClass('active').siblings().removeClass('active');
}); //滚动加载方法1
$('#main').scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
//这里用 [ off_on ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
if (off_on) {
//off_on = false;
//page++;
//console.log("第"+page+"页");
//LoadingDataFn(); //调用执行上面的加载方法
}
}
}); //滚动加载方法2
$('#main').scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
clearTimeout(timers);
//这里还可以用 [ 延时执行 ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
timers = setTimeout(function() {
page++;
console.log("第" + page + "页");
LoadingDataFn(); //调用执行上面的加载方法
}, 300);
}
}); //还可以基window窗口（body）来添加滚动事件, (因为布局不同,所以在这里没效果，因为[上面是基于body中的某个元素来添加滚动事的])
$(window).scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
clearTimeout(timers);
timers = setTimeout(function() {
page++;
console.log("第" + page + "页");
LoadingDataFn();
}, 300);
}
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery上拉加载更多-jq22.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
* {
margin:0px;
padding:0px;
}
#header {
position:fixed;
top:0px;
left:0px;
width:100%;
height:50px;
background:#FAA732;
text-align:center;
line-height:50px;
color:white;
font-weight:bold;
}
#main {
position:absolute;
top:50px;
left:0px;
right:0px;
bottom:51px;
padding:10px;
overflow:auto;
}
#main li {
display:flex;
margin-bottom:10px;
padding:10px;
border-bottom:1px solid gray;
border-radius:4px;
background:#EEE;
}
#main li img {
flex:50px 0 0;
width:50px;
height:50px;
padding:4px;
border:1px solid green;
}
#main li span {
padding-left:4px;
line-height:24px;
}
#footer {
display:flex;
position:fixed;
left:0px;
bottom:0px;
width:100%;
height:50px;
border-top:1px solid gray;
background:#FAA732;
}
#footer div {
flex:1;
text-align:center;
line-height:50px;
color:white;
font-weight:bold;
border-right:1px solid white;
}
#footer div:nth-child(4) {
border:none;
}
#footer .active {
background:#0086FF;
}
</style>
</head>
<body>
<header id="header">首 页</header> <section id="main">
<ul id="list_box"></ul>
</section> <footer id="footer">
<div class="active">首页</div>
<div>商城</div>
<div>其他</div>
<div>我的</div>
</footer><script>
var page = 1, //分页码
off_on = false, //分页开关(滚动加载方法 1 中用的)
timers = null; //定时器(滚动加载方法 2 中用的) //加载数据
var LoadingDataFn = function() {
var dom = '';
for (var i = 0; i < 20; i++) {
dom += '<li><img src="http://www.jq22.com/img/cs/500x500a.png"/><span>上滑列加载表内容上滑列加载表内容上滑列加载表内容上滑列加载表内容</span></li>';
}
$('#list_box').append(dom);
off_on = true; //[重要]这是使用了 {滚动加载方法1} 时 用到的 ！！！[如果用 滚动加载方法1 时：off_on 在这里不设 true的话， 下次就没法加载了哦！]
}; //初始化， 第一次加载
$(document).ready(function() {
LoadingDataFn();
}); //底部切换
$(document.body).on('click', '#footer div', function() {
$(this).addClass('active').siblings().removeClass('active');
}); //滚动加载方法1
$('#main').scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
//这里用 [ off_on ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
if (off_on) {
//off_on = false;
//page++;
//console.log("第"+page+"页");
//LoadingDataFn(); //调用执行上面的加载方法
}
}
}); //滚动加载方法2
$('#main').scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
clearTimeout(timers);
//这里还可以用 [ 延时执行 ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
timers = setTimeout(function() {
page++;
console.log("第" + page + "页");
LoadingDataFn(); //调用执行上面的加载方法
}, 300);
}
}); //还可以基window窗口（body）来添加滚动事件, (因为布局不同,所以在这里没效果，因为[上面是基于body中的某个元素来添加滚动事的])
$(window).scroll(function() {
/* //当时滚动条离底部60px时开始加载下一页的内容
if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
clearTimeout(timers);
timers = setTimeout(function() {
page++;
console.log("第" + page + "页");
LoadingDataFn();
}, 300);
} */
});</script>
</body>
</html>
jQuery上拉加载更多的更多相关文章
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- mui的上拉加载更多 下拉刷新 自己封装的demo
----------------------------------------------- 这是一个非常呆萌的程序妹子,深夜码的丑代码------------------------------- ...
- 【Web】移动端下拉刷新、上拉加载更多插件
移动网站中常常有的功能:列表的下拉刷新.上拉加载更多 本例介绍一种简单使用的移动端下拉刷新.上拉加载更多插件,下载及参考地址:https://github.com/ximan/dropload 插件依 ...
- 【前端】上拉加载更多dropload.min.js的使用
代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset ...
- mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉
空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...
- H5基于iScroll实现下拉刷新，上拉加载更多
前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...
- 常见开发需求之angular上拉加载更多
需求 移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...
- ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多
ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...
- ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项
首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...
随机推荐
- MySQL系统变量auto_increment_increment与auto_increment_offset学习总结
在MySQL中,系统变量auto_increment_increment与auto_increment_offset是与自增列相关的两个参数变量.在官方文档中,将其划分为Replication Mas ...
- CentOS 7升级Python到3.6.6后yum出错问题解决总结
最近将一台测试服务器操作系统升级到了Cent0S 7.5,然后顺便也将Python从2.7.5升级到Python 3.6.6,升级完成后,发现yum安装相关包时出现异常,报"File & ...
- 在VMware15中安装虚拟机并使用Xshell连接到此虚拟机（超详细哦）
首先点击创建新的虚拟机. 此处默认, 点击下一步 默认, 点击下一步 此处可以设置你的虚拟机名称和安装位置(强烈建议不要将安装位置放在系统盘). 此处可根据自己的电脑配置来设置(建议2,4),后续可以 ...
- 学习笔记31_ORM框架ModelFirst设计数据库
ModelFirst就是先设计实体数据类型,然后根据设计的数据类型,生成数据库表 1.新建项--ADO.NET实体数据模型--空数据模型--进入模型设计器(点击xxx.edmx文件也能进入设计器). ...
- 敏捷宣言（Agile Manifesto）和敏捷开发十二原则
敏捷宣言 The Agile Manifesto Individuals and interactions over Process and tools 个体与交互 重于 过程和工具 Working ...
- CSPS模拟 91
T1 sz最多根号种 T2 没计算内存,水过了..CSPS这样的话要爆零的qaq T3 感谢miku带我重学ST表%%%%%
- 工具类 ，无需再存localstorage
/** * 工具类 */var Utils = { /** * 获得查询参数 */ getQueryString: function(name) { var search = location.sea ...
- javascript中判断数据类型
编写javascript代码的时候常常要判断变量,字面量的类型,可以用typeof,instanceof,Array.isArray(),等方法,究竟哪一种最方便,最实用,最省心呢?本问探讨这个问题. ...
- lenovo ubuntu18.04 找不到网络适配器
链接: https://pan.baidu.com/s/1YJl-MfG0tVy9sLx4_otmnA 提取码: smfp https://blog.csdn.net/John_chaos/artic ...
- 花一天时间试玩vsphere6.7（EXSI）服务器版的vmware
花一天时间试玩vsphere6.7(EXSI)服务器版的vmware 要注册账号(2019年11月14注册): 登陆网址:https://my.vmware.com/cn/group/vmware/h ...