jQuery 实现上拉刷新，下拉加载
1.html部分
<div class="container">
<div class="scroll">
<div class="status">
<p>下拉刷新</p>
</div>
<ul id="items">
</ul>
</div>
</div>
这块是需要display = none
<ul id="itemTemplate" style="display: none;">
<li class="li">
<h5>我是谁我在哪我在干嘛</h5>
<div class="overflow mt10">
</div>
</li>
</ul>
2.js部分
var ctx = "http://localhost:8090";
$(function () {
var searchName = getQueryVariable('searchName');
getSupplierList(decodeURI(decodeURI(searchName)));
});
var page = 1;
var limit = 15;
// 从后台获取数据
function getSupplierList(searchName) {
var url = ctx + '/wx/getSupplierList';
var s = $.ajax({
url: url,
data: {
searchName: searchName,
page: page,
limit: limit
},
type: "post",
dataType: "json",
scriptCharset: 'utf-8',
success: function (res) {
if (res.code == 0) {
var list = res.data;
if (list) {
var items = null;
console.log(list)
$.each(list, function (index, item) {
items = $("#itemTemplate").find("li:eq(0)").clone();
items.show();
items.find("h5").html(item.contractTitle);
items.find(".mt10").html('<span class="timeIcon fl"><i><img src="img/time.png"></i>' + item.col10 + '</span>');
$("#items").append(items);
});
}
}
}
});
}
// 获取 url 上的参数
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
3.上拉刷新
// ------------------上拉刷新--------------------------
//定义的全局变量
var disY, startY, endY;
//触摸事件开始时触发
$('.scroll').on('touchstart', function (e) {
console.log(e);
startY = e.originalEvent.changedTouches[0].pageY;
});
//触摸事件移动中时触发
$('.scroll').on('touchmove', function (e) {
endY = e.originalEvent.changedTouches[0].pageY;
disY = endY - startY;
if (disY > 30) {
$('.status').css({
display: 'block',
height: disY + 'px',
});
}
});
//触摸事件结束时触发
$('.scroll').on('touchend', function (e) {
endY = e.originalEvent.changedTouches[0].pageY;
disY = endY - startY;
if (disY > 72) {
//定义一个定时器，返回下拉到一定的高度
var timer = setInterval(function () {
disY -= 13;
if (disY <= 60) {
$('.status').css({
height: 52 + 'px',
});
clearInterval(timer);
refresh();
}
$('.status').css({
height: disY + 'px',
});
}, 75);
}
});
//请求刷新数据
function refresh() {
var t = setTimeout(function () {
/*for (var i = 0; i < 13; i++) {
$('.scroll ul').append('<li>' + '添加的数据:' + parseInt(i + 1) + '</li>');
}*/
page ++;
var searchName = getQueryVariable('searchName');
getSupplierList(decodeURI(decodeURI(searchName)));
$('.status').css({
display: 'none',
height: 0
});
clearTimeout(t)
}, 3000);
}
4.下拉加载
//--------------下拉加载更多---------------
//获取滚动条当前的位置
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
//获取当前可视范围的高度
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}
//获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
//滚动事件触发
window.onscroll = function () {
if (getScrollTop() + getClientHeight() === getScrollHeight()) {
console.log('在这里加载数据咯！');
}
};
