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 ...
随机推荐
- 安装ubuntu16虚拟机，下载android源码，配置编译环境
Android 源码编译步骤: 我考虑了一下,目前电脑装了SSD,8G内存,使用虚拟机编译源码应该够用. 首先下载虚拟机软件,由于最近一直在使用virtualbox,感觉蛮不错了,下载地址: http ...
- [考试反思]1014csp-s模拟测试73：侵蚀
嗯...还是没有改变那个现状 依旧只是打满了暴力,虽说T2打的的确比暴力好很多,但是因为出题人没有设分所以和暴力等同. 离上面的分差还是大的很,下面还是追的很紧 而且进几场的排名也是连续下滑... 虽 ...
- spring session源码解析
模块划分 core部分代码 存储实现部分部分: jdbc实现 具体存储的实现类 例如:org.springframework.session.jdbc.JdbcOperationsSessionRep ...
- zookeeper集群搭建2.7
http://blog.csdn.net/uq_jin/article/details/51513307
- Oracle“ORA-00979:不是GROUP BY 表达式”解决方式
今天在工作中碰到一个问题,用group by 语句进行分组时出现ORA-00979错误. 代码如下: select R.ORDER_NO, R.PRODUCT_CODE, R.REGION_NO, R ...
- python学习之【第十五篇】：Python中的常用模块之time模块
1.前言 在Python中,对时间的表示或操作通常要使用到time模块.本篇博文就来记录一下time模块中常用的几种时间表示转换方法. 2. 三种时间表示形式 2.1 时间戳 从1970年1月1日零点 ...
- windows下同时装了Python3和Python2，如何区分使用？
1.前言 想学习Python3,但是暂时又离不开Python2.在Windows上如何让它们共存呢? 目前国内网站经常会让大家把其中一个python.exe改个名字,这样区分开两个可执行文件的名字,但 ...
- C++ 11新标准实现POJ No.1001-Exponentiation
Exponentiation(高精度幂计算)(标签:链表,字符串,快速幂计算) 题目描述 对数值很大.精度很高的数进行高精度计算是一类十分常见的问题.比如,对国债进行计算就是属于这类问题. 现在要你解 ...
- Scrapy进阶知识点总结（一）——基本命令与基本类(spider,request,response)
一.常见命令 scrapy全局命令可以在任何地方用,项目命令只能在项目路径下用 全局命令: 项目命令: startproject crawl genspider check settings list ...
- jquery倒计时代码
jquery倒计时代码<pre> <span id="day_show">0天</span> <strong id="hour_ ...