上拉刷新，下拉加载更多。。。仿原生的效果----iscroll是一款做滚动效果的插件，具体介绍我就不废话，看官方文档，我只写下我项目开发的一些用到的用法：
(如果不好使，调试你的css，想必是个很蛋疼的问题，给点提示 ：#wrapper，以及#scroller-content要注意）
html如下：
<div class="viewport">
<div id="wrapper" class="wrapper">
<div id="scroller">
<div id="scroller-pullDown">
<span id="down-icon" class="pull-down-icon fa fa-refresh fa-spin fa-fw"></span>
<span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>
</div>
<div id="scroller-content">
//你写的内容在这里
</div>
<div id="scroller-pullUp">
<span id="up-icon" class="pull-up-icon fa fa-spinner fa-spin fa-fw"></span>
<span id="pullUp-msg" class="pull-up-msg">上拉加载</span>
</div>
</div>
</div>
</div>
css如下：
/* =================iscroll================================= */
#wrapper {
position: absolute;
z-index:;
top: 210*@size;
bottom: 0px;
left:;
width: 100%;
overflow: hidden;
}
#scroller {
position: absolute;
z-index:;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller-pullDown,
#scroller-pullUp {
background: #333333;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
font-weight: bold;
font-size: 14px;
color: #888;
text-align: center;
position: absolute;
left: 0px;
width: 100%;
}
#scroller-pullDown {
top: -50px;
}
#scroller-pullUp {
bottom: -50px;
}
.pull-up-msg,
.pull-down-msg {
padding-left: 5px;
position: relative;
top: 0px;
}
#scroller-pullDown .pull-down-icon,
#scroller-pullUp .pull-up-icon {
display: inline-block;
color: #e84c3d;
font-size: 16px;
}
js代码看这里：
function pushData(m) {
var m = m || 10;
if (flag) {
//发送Ajax,循环自己的数据加载：
$.myGET(uri, {formData}, function (data) {
if (data.result) {
for (var i = 0; i < data.package.length; i++) {
data.package[i].isPass ? data.package[i].isPass = "pass" : data.package[i].isPass = "unpass";
temp = '<li>' + '<span class="item ellips">' + data.package[i].planName + '</span>' + '<span class="time">' + '2017.03.08' + '</span>' + '<span class="score">' + data.package[i].score + '</span>' + '<span class="status"><img src="/images/mainFrame/icon_result_' + data.package[i].isPass + '.png" alt=""></span>' + '<li>';
$("#target").append(temp);
}
if (m * n > data.total) {
$("#pullUp-msg").text("已无更多数据");
flag = false;
return false;
}
}
}
(function(window) {
var myScroll,
upIcon = $("#up-icon"),
downIcon = $("#down-icon"),
target = $("#target"),
temp = " ";
myScroll = new IScroll('#wrapper', {
probeType: 3,
mouseWheel: true
});
myScroll.on("scroll", function() {
var y = this.y,
maxY = this.maxScrollY - y,
downHasClass = downIcon.hasClass("reverse_icon"),
upHasClass = upIcon.hasClass("reverse_icon");
if (y >= 40) {
!downHasClass && downIcon.addClass("reverse_icon");
return "";
} else if (y < 40 && y > 0) {
downHasClass && downIcon.removeClass("reverse_icon");
return "";
}
if (maxY >= 40) {
!upHasClass && upIcon.addClass("reverse_icon");
return "";
} else if (maxY < 40 && maxY >= 0) {
upHasClass && upIcon.removeClass("reverse_icon");
return "";
}
});
//下拉逻辑在这里！
myScroll.on("slideDown", function() {
if (this.y > 40) {
window.location.reload();
}
});
//上拉逻辑在这里！
myScroll.on("slideUp", function() {
if (this.maxScrollY - this.y > 40) {
pushData();
myScroll.refresh();
}
});
})(window)