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 ...
随机推荐
- 洛谷P3121 【[USACO15FEB]审查（黄金）Censoring (Gold)】
双栈+AC自动机 这题其实跟一道KMP算法的题有一些渊源,它就是这道题的简单板. Clear: 给你两个串A,B,每次在B串中从左到右找串A,并将该子串删除,直到找不到为止,问你能删几次. 样例输入: ...
- MySQL批量插入的分析以及注意事项
目录 1.背景 2.两种方式对比 2.1.一次插入一条数据 2.2.一次插入多条数据 3.拓展一下 4.Other 1.背景 我们在工作中基本都会碰到批量插入数据到DB的情况,这个时候我们就需要根据不 ...
- [考试反思]0825NOIP模拟测试31：喘息
好吧,我又活了 大脸又. 240,220,210,200,200... T1是个不会证明的傻子找规律算上看了一遍三道题之后一共20分钟搞定. skyh打的是错的可是成功qj全部测试点得到AC(会被手模 ...
- [springboot 开发单体web shop] 5. 用户登录及首页展示
用户登录及前端展示 用户登录 在之前的文章中我们实现了用户注册和验证功能,接下来我们继续实现它的登录,以及登录成功之后要在页面上显示的信息. 接下来,我们来编写代码. 实现service 在com.l ...
- 因为 GitHub Actions 我发现了 Jake Wharton 的一个仓库
本文微信公众号「AndroidTraveler」首发. 背景 昨天(2019-11-14)上去 GitHub 上面一看,结果来了个下面的提示: 点进去一看: 看来是自动化构建相关的. 那就试一下,选了 ...
- Web微信开发工具无法输入中文？官方bug
Ctrl+shift+w 重启工具就OK啦
- 腾讯Techo开发者大会PPT分享
腾讯云年度的开发者大会已经落幕,大会包括1场前沿技术主峰会,18个技术专场,150位海内外技术专家,28个互动展区,8场动手实验室,23小时小程序云开发极限编程,1场数据库诊断大赛. 内容上涵盖了最新 ...
- java编程思想第四版第十四章 类型信息习题
fda dfa 第三题u package net.mindview.typeinfo.test4; import java.util.ArrayList; import java.util.Array ...
- 在VMware15.5中安装CentOS7_7_64bit
一.创建虚拟机 在我的另一个随笔里有. 地址为:https://www.cnblogs.com/qi-yuan/p/11692092.html 只是在虚拟机安装操作系统时候选择 Linux 而不是 W ...
- ssm 不能将查询的结果返回到界面的一个原因
* 在controller类中,应先定义一个ArrayList的集合即就是: List<Product> defaultProductList = new ArrayList(); // ...