问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
h5手机端怎么实现上拉加载、下拉刷新？有什么插件的，还是需要自己写函数的？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如果你对上拉和下拉的动作动作要求很高的话，你可以试试：监听滚动条，1.滚动到底部时，如果用户停顿超过3s（打比方，根据实际决定），那么就自动帮用户加载下一页的数据；2.滚动到顶部，展示刷新的图标，用户一点，便刷新页面。
这样的话就无须去引入框架什么的拉，代码量也不多。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
iScroll.js
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
移动端 下拉刷新 & 上拉加载 组件，支持自定义dom，简单易用，适用大多数场景
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：html5+css3实现上拉和下拉刷新
发表于 10:43:52|
来源webkfa|
作者小猪仔
摘要：支持手机上的所有浏览器
相关:&下面代码运行要在支持html5+css3的浏览器运行代码
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"&
&meta name="apple-mobile-web-app-capable" content="yes"&
&meta name="apple-mobile-web-app-status-bar-style" content="black"&
&title&html5+css3实现上拉和下拉刷新&/title&
&script type="text/javascript" src="/js/iscroll.js"&&/script&
&script type="text/javascript"&
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
function pullDownAction () {
setTimeout(function () { // &-- Simulate network congestion, remove setTimeout from production!
var el, li,
el = document.getElementById('thelist');
for (i=0; i&3; i++) {
li = document.createElement('li');
li.innerText = 'Generated row ' + (++generatedCount);
el.insertBefore(li, el.childNodes[0]);
myScroll.refresh();
// Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // &-- Simulate network congestion, remove setTimeout from production!
function pullUpAction () {
setTimeout(function () { // &-- Simulate network congestion, remove setTimeout from production!
var el, li,
el = document.getElementById('thelist');
for (i=0; i&3; i++) {
li = document.createElement('li');
li.innerText = 'Generated row ' + (++generatedCount);
el.appendChild(li, el.childNodes[0]);
myScroll.refresh();
// Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // &-- Simulate network congestion, remove setTimeout from production!
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetH
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetH
myScroll = new iScroll('wrapper', {
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
onScrollMove: function () {
if (this.y & 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y & 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownO
} else if (this.y & (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
this.maxScrollY = this.maxScrollY;
} else if (this.y & (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
this.maxScrollY = pullUpO
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
pullUpAction(); // Execute custom function (ajax call?)
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
&style type="text/css" media="all"&
body,ul,li {
padding:0;
font-size:12
-webkit-user-select:
-webkit-text-size-adjust:
font-family:
position: z-index:2;
top:0; left:0;
width:100%;
line-height:45
background-color:#d51875;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
padding:0;
font-size:20
text-align:
#header a {
color:#f3f3f3;
text-decoration:
font-weight:
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
position: z-index:2;
bottom:0; left:0;
width:100%;
background-color:#222;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
background-image:-o-linear-gradient(top, #999, #666 2%, #222);
padding:0;
border-top:1px solid #444;
#wrapper {
position: z-index:1;
top:45 bottom:48 left:-9999
width:100%;
background:#
#scroller {
position: z-index:1;
/* -webkit-touch-callout:*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
#scroller ul {
list-style:
padding:0;
width:100%;
text-align:
#scroller li {
padding:0 10
line-height:40
border-bottom:1px solid #
border-top:1px solid #
background-color:#
font-size:14
#myFrame {
top:0; left:0;
* Pull down styles
#pullDown, #pullUp {
background:#
line-height:40
padding:5px 10
border-bottom:1px solid #
font-weight:
font-size:14
color:#888;
#pullDown .pullDownIcon, #pullUp .pullUpIcon
display: float:
width:40 height:40
background:url(/img/pull-icon@2x.png) 0 0 no-
-webkit-background-size:40px 80 background-size:40px 80
-webkit-transition-property:-webkit-
-webkit-transition-duration:250
#pullDown .pullDownIcon {
-webkit-transform:rotate(0deg) translateZ(0);
#pullUp .pullUpIcon
-webkit-transform:rotate(-180deg) translateZ(0);
#pullDown.flip .pullDownIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
#pullUp.flip .pullUpIcon {
-webkit-transform:rotate(0deg) translateZ(0);
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
background-position:0 100%;
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-transition-duration:0
-webkit-animation-name:
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:
-webkit-animation-timing-function:
@-webkit-keyframes loading {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(360deg) translateZ(0); }
&div id="header"&&a href="http://cubiq.org/iscroll"&iScroll&/a&&/div&
&div id="wrapper"&
&div id="scroller"&
&div id="pullDown"&
&span class="pullDownIcon"&&/span&&span class="pullDownLabel"&Pull down to refresh...&/span&
&ul id="thelist"&
&li&Pretty row 1&/li&
&li&Pretty row 2&/li&
&li&Pretty row 3&/li&
&li&Pretty row 4&/li&
&li&Pretty row 5&/li&
&li&Pretty row 6&/li&
&li&Pretty row 7&/li&
&li&Pretty row 8&/li&
&li&Pretty row 9&/li&
&li&Pretty row 10&/li&
&li&Pretty row 11&/li&
&li&Pretty row 12&/li&
&li&Pretty row 13&/li&
&li&Pretty row 14&/li&
&li&Pretty row 15&/li&
&li&Pretty row 16&/li&
&li&Pretty row 17&/li&
&li&Pretty row 18&/li&
&li&Pretty row 19&/li&
&li&Pretty row 20&/li&
&li&Pretty row 21&/li&
&li&Pretty row 22&/li&
&li&Pretty row 23&/li&
&li&Pretty row 24&/li&
&li&Pretty row 25&/li&
&li&Pretty row 26&/li&
&li&Pretty row 27&/li&
&li&Pretty row 28&/li&
&li&Pretty row 29&/li&
&li&Pretty row 30&/li&
&li&Pretty row 31&/li&
&li&Pretty row 32&/li&
&li&Pretty row 33&/li&
&li&Pretty row 34&/li&
&li&Pretty row 35&/li&
&li&Pretty row 36&/li&
&li&Pretty row 37&/li&
&li&Pretty row 38&/li&
&li&Pretty row 39&/li&
&li&Pretty row 40&/li&
&div id="pullUp"&
&span class="pullUpIcon"&&/span&&span class="pullUpLabel"&Pull up to refresh...&/span&
&div id="footer"&&/div&
童颜巨乳妹诱人写真令人喷血
羽毛球场上酥胸美女上演极致诱惑
极品尤物! 火辣姐妹花双飞诱惑
学到老在线代码浏览器基于iscroll实现下拉和上拉刷新（优化） | 前端学习
在之前，是有写过一篇相同的文章（），这里把之前的那个插件进行了重写，使得该插件使用起来更为简便，同时，也把一些效果，变得更为的流畅简单，甚至连配置参数都是变化之后的，接下来，就简单的介绍一下，该插件的使用方法。
下拉刷新–详情介绍
函数命名：XMSScrollFrame
函数调用：new xmsCore.XMSScrollFrame(scrollId,options)
参数：scrollId和options介绍，请继续向下看。
移动端的框架，所以库方法使用的是Zepto.js（当然肯定是支持jQuery了），因为其文件小。下拉加载，也使用了IScroll插件，这是插件XMSScrollFrame中，必须包含的两个库文件。
请直接使用在DEMO引入的Zepto和IScroll，因为IScroll插件，是经过了一些简单的更改，如果您想使用最新版的IScroll，请确保，把旧版本的改动，自己添加到最新版的IScroll版本中。（请确保，您对IScroll有一定深度的自己认识，以保证您添加的代码，不会影响到这个插件的原有功能。）
传入参数介绍
传入的参数格式，参考自IScroll的初始化格式，所以，传入一个参数scrollId，用来表示，需要初始化的区域Id，额外传入一个对象options，用于保存一些配置参数。
options的大多数参数，是IScroll的参数，所以，如果想要查看更详细的参数设置，请参考：
为了能完成本插件的功能，额外的添加了以下的参数：
下拉刷新被触发时，执行的回调函数。
内部this指向XMSScrollFrame的实例
传入一个参数为下拉时，展示下拉动作的DIV的Zepto对象
上拉刷新被触发时，执行的回调函数。
内部this指向XMSScrollFrame的实例
传入一个参数为上拉时，展示上拉动作的DIV的Zepto对象
downStatus
设置下拉功能的状态。
默认值为true，表示下拉功能打开
如果不需要下拉功能，那么把该值设置为false
设置上拉功能的状态。
默认值为true，表示上拉功能打开
如果不需要上拉功能，那么把该值设置为false
实例方法介绍
该方法，既然在初始化时，是有设置上拉，下拉的模块是否启用的功能，那么在实例之后，就必须有开启和关闭上拉下拉功能的模块，所以，这里介绍一下，该实例中，包含的一些，供以后使用的方法，以及一些可操作的属性。
在接下来的列表中，我会把一些比较重要的属性和方法，一一说明，这些属性和方法，在实际的项目中，会被使用到。（说明顺序，随机）（假设实例化后变量为scrollFrime）
scrollFrime.wrapper
初始化下拉刷新的区域。
该插件，需要一个固定的结构，在下面的文档中，我会给出一个特定的结构，并以特定的结构为示例，分别说明实例中的属性所代表的元素。
scrollFrime.downDiv
在下拉之后，会有一个下拉后的提示信息，它是一个className="frame-scroll-down-ele"的元素。
scrollFrime.upDiv
在上拉之后，会有一个上拉后的提示信息，它是一个className="frame-scroll-up-ele"的元素。
scrollFrime.myScroll
IScroll实例
本插件，是基于IScroll实现的，为了能更具备扩展性，所以，把IScroll的实例直接保存到了myScroll属性上。
关于IScroll实例支持的属性，请直接查看：
scrollFrime.downSwitch(status)
下拉刷新功能的开关
传入的status=false时，表示关闭下拉功能。
设置为任意其他值，都表示打开下拉功能。
为了能对以后有更好的扩展，方能操作。
scrollFrime.upSwitch(status)
上拉刷新功能的开关
传入的status=false时，表示关闭上拉功能。
设置为任意其他值，都表示打开上拉功能。
为了能对以后有更好的扩展，方能操作。
scrollFrime.downSucc()
下拉功能被触发时，页面的顶部，会出现一个特殊的样式
这个时候，去执行一些操作，当操作完成之后，是需要更新数据（或者其他的操作），顶部的特殊样式消失。
只所以这么写，是为了能更好的扩展
scrollFrime.upSucc()
上拉功能被触发时，页面的顶部，会出现一个特殊的样式
这个时候，去执行一些操作，当操作完成之后，是需要更新数据（或者其他的操作），顶部的特殊样式消失。
只所以这么写，是为了能更好的扩展
移动端页面，在以后需要一种固定的结构，请参考后面的示例中的布局。
这里，我取其中的一部分，进行一次说明：
&body class = "frame-wrapper"&
在下拉刷新中，显示状态的地方，是class = "frame-scroll-down-ele"的div，上拉刷新更改的是class = "frame-scroll-up-ele"的div。
如果需要给他们添加不同的显示格式，那么就可以在这两个DIV内部，添加不同的子元素即可。
在整个下拉或者上拉的过程中，会根据不同的状态，给这另个DIV添加不同的className，下面一一的说明。
当下拉到一定程度之后，就是出现一种状态，比如“下拉可刷新”等，那么这个时候，会给这对应的div添加一个样式：frame-scroll-load，这个时候，是提示，下拉可刷新。您松开手的时候，就会触发下拉刷新的功能。
而当触发下拉刷新功能之后，就会去除frame-scroll-load，然后重新添加一个名为frame-scroll-loadding的className，这个时候同时会触发，实例化该方法时，传入的downFn，请参考上面的介绍。
上拉时，有相同的处理。这里就不做介绍。
移动端可以扫码直接查看DEMO哦，
移动端可以扫码直接查看DEMO哦，
对IScroll实现下拉刷新和上拉加载插件的重写，使得该插件使用更简单，更流畅，也支持了如果首次加载时，内容没有占满一屏而导致的无法下拉的问题，并且可以自定义开启和关闭下拉和上拉的API接口等。
注：本例中引入的iscroll.js经过了作者本人的一些修改，所以跟官网的代码，有出入，如需验证该问题，请自行下载demo。
下面提供了一个最简单的DEMO，也是该功能相关的所需的必要的JS和CSS，以及基本的HTML结构，请参考：
如有问题，也请不吝指教，谢谢！
本文地址：随笔 - 51&
文章 - 22&评论 - 17&trackbacks - 0
js菜鸡-------自我记录
html页面：
&!DOCTYPE html&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/&
&meta name="format-detection" content="telephone=no"&
&meta name="format-detection" content="address=no"&
&title&iscroll-测试&/title&
&link href="css/reset.css" rel="stylesheet" type="text/css"&
&link href="css/cm.css" rel="stylesheet" type="text/css"&
span{display:block;width:<span style="background-color: #f5f5f5; color: #%;text-align:center;}
&div id="wrapper"&
&div id="scroller"&
&div id="pullDown"&
&span class="pullDownIcon"&&/span&&span class="pullDownLabel"&下拉刷新&/span&
&!--信息列表--&
&ul id="thelist"&
&div class="cm-v2 no-border"&
&section class="doc-box"&
&ul class="doctorUlList" id="doctorUlListAuto"&
&!--此处展示具体信息 --&
&/section&
&div id="pullUp"&
&span class="pullUpIcon"&&/span&&span class="pullUpLabel" &查看更多&/span&
&div id="footer"&&/div&
&script type="text/javascript" src="js/jquery-1.8.2.min.js"&&/script&
&script type="text/javascript" src="js/iscroll.js"&&/script&
&script type="text/javascript" src="js/getList-iscroll.js"&&/script&
&script type="text/javascript"&
var currentPage = 1;
Ajax(currentPage);
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpO
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetH
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetH
myScroll = new iScroll('wrapper', {
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'refresh...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'load more...';
onScrollMove: function () {
if (this.y & 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'refresh...';
this.minScrollY = 0;
} else if (this.y & 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'refresh...';
this.minScrollY = -pullDownO
} else if (this.y & (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'refresh...';
this.maxScrollY = this.maxScrollY;
} else if (this.y & (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'load more...';
this.maxScrollY = pullUpO
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction();
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
pullUpAction();
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
function pullDownAction () {
window.location.reload();
function pullUpAction () {
var page = currentPage++;
Ajax(page);
myScroll.refresh();
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
ajax请求后台数据：
* Created by jstarseven on .
function Ajax(page) {
type: "post",
dataType: "JSON",
url: "/wx_service/getList",
data: {'page': page},
success: function (data) {
var item = '';
$.each(data, function (i, result) {
var skill = result['skill'];
item += '&li&';
item += '&a href="getDoctorDetail.html?doctorId=' + result['doctorId'] + '"&';
item += '&div class="doc-pic"&&img id="headPicUrl" src="' + result['headPicUrl'] + '" alt=""&&/div&';
item += '&div class="doc-info"&';
item += '&h4&&span&' + result['doctorName'] + '&/span& &span&' + result['doctorTitle'] + '&/span&&/h4&';
item += '&p class="c-666"&' + result['hospitalName'] + '&/p&';
item += '&p class="shanchang" id="skillBegin"&';
$.each(skill, function (i) {
item += '&span&' + skill[i] + '&/span&';
item += '&/p&';
item += '&div class="feiyong"&';
item += '&span class="s1"&& &span&' + result['consultPrice'] + '&/span&/次&/span&';
item += '&span class="s2"&&span&' + result['payNumber'] + '&/span&人付款，&span&' + result['praisePercent'] + '&/span& 好评&/span&';
item += '&/div&';
item += '&/div&';
item += '&/a&';
item += '&/li&';
$('.doctorUlList').append(item);
error: function () {
console.log("当前请求失败");
阅读(...) 评论()}