前言：第一次写H5页面由于页面中的列表数据需要做分页，搜索了许多相关的下拉刷新插件使用起来都比较复杂，索性自己写了一个较为简单的分页加载相关的插件；
（ps:由于使用过程中考虑的局限性可能会存在一些问题，欢迎大家使用并提出问题，空闲时间我会优化问题）
1.使用pulltorefresh.js
/**
* Created by yunzao on 2017/12/27.
*/
(function (window) {
var u = {};
var slideView = null;
var moveMaxHeight = 50;//移动多少距离触发
var tempHeight = 0;
var scrollTop = 0;//滚动条距离顶部的位置
var touchStartY = 0;
var touchMoveY = 0;
var touchEndY = 0;
var addHeader = false;//头部是否已添加了
var addFooter = false;//底部是否已添加了
var loadMoreSuc = true;//默认加载更多成功
var loadRefreshSuc = true;//默认下拉刷新加载成功
var isEmpty = false;//默认是否为空数据页面
var isNoMore = false;//是否没有更多了
var emptyMsg = '暂无数据~';//默认的空显示文字
var loadingHtml = '
';
var refreshHeadHtml =
"" +
"下拉立即刷新" +
" ";
var loadMoreHtml =
"";
var emptyHtml =
"" +
"" +
"暂无数据~" +
"";
u.slide = function (slide) {
slideView = slide;
slide.viewObj.on('touchstart', function (e) {
var _touch = e.originalEvent.targetTouches[0];
var _y = _touch.pageY;
touchStartY = _y;
});
slide.viewObj.on('touchmove', function (e) {
var _touch = e.originalEvent.targetTouches[0];
var _y = _touch.pageY;
touchMoveY = _y;
var temp = touchMoveY - touchStartY;
scrollTop = slide.viewObj.scrollTop();
// console.log("移动中：" + scrollTop);
if (scrollTop == 0 && (touchMoveY - touchStartY) > 10 && !isEmpty) {
if (!addHeader) {
addHeader = true;
slide.viewObj.children('ul').before(refreshHeadHtml);
} else {
$("#pullHeader").height(temp);
if ((touchMoveY - touchStartY) > moveMaxHeight) {
$("#pullHeader_tip").text('松手即可刷新');
} else if ((touchMoveY - touchStartY) < (moveMaxHeight - 1)) {
$("#pullHeader_tip").text('下拉立即刷新');
}
}
}
});
slide.viewObj.on('touchend', function (e) {
var _touch = e.originalEvent.changedTouches[0];
var _y = _touch.pageY;
touchEndY = _y;
// console.log(touchStartY + "/" + touchEndY)
//下拉刷新
if (scrollTop == 0 && !isEmpty) {
//如果用户下拉出现了正在刷新 然后又往上推 就不执行刷新
if (touchEndY > touchStartY) {
if ((touchEndY - touchStartY) > moveMaxHeight) {
if (loadRefreshSuc) {
isNoMore = false;
$("#pullHeader_tip").text('正在刷新中...');
$("#pullHeader_tip").before(loadingHtml);
//刷新的时候如果底部有 就需要删除并重置
if ($("#pullFooter") != null || $("#pullFooter") != undefined) {
$("#pullFooter").remove();
addFooter = false;
loadMoreSuc = true;
}
//使用双回调 这里回调给页面开始执行加载更多 页面加载完毕回调到这里
slide.refresh(function () {
//回调到这里 刷新完毕
$("#pullHeader").remove();
addHeader = false;
loadRefreshSuc = true;
// slide.viewObj.removeChild();
});
loadRefreshSuc = false;
}
} else {
$("#pullHeader").remove();
addHeader = false;
}
} else {
$("#pullHeader").remove();
addHeader = false;
}
} else if (scrollTop >= 0) {
$("#pullHeader").remove();
addHeader = false;
}
});
//上拉加载
slide.viewObj.scroll(function () {
if (!isNoMore) {
if (!isEmpty) {
if (loadMoreSuc) {
var scrollTop = $(this).scrollTop();//滚动条的高度，即滚动条的当前位置到div顶部的距离
var scrollHeight = $(this)[0].scrollHeight;//滚动的高度
var wiewHeight = $(this).height();//div可视区域的高度
// console.log(scrollTop + "/" + wiewHeight + "/" + scrollHeight);
if (scrollTop + wiewHeight == scrollHeight) {
if (!addFooter) {
slide.viewObj.children('ul').children('#pullFooter').remove();
slide.viewObj.children('ul').append(loadMoreHtml);
addFooter = true;
loadMoreSuc = false;
}
//使用双回调 这里回调给页面开始执行加载更多 页面加载完毕回调到这里
slide.loadMore(function (isEndLoadMore) {
//回调结果为true表示没有更多了 并执行回调完毕
if (!isEndLoadMore) {
$("#pullFooter").remove();
addFooter = false;
setTimeout(function () {
loadMoreSuc = true;
}, 1000)
} else {
$("#pullFooter").empty();
$("#pullFooter").text('没有更多了~');
}
});
}
}
}
}
});
}
/**
* 设置空
* @param sView 父view
* @param emptyTxt 空显示文字 默认显示
* @param emptyImgSrc 空显示图片 默认不显示
*/
u.slide.empty = function (sView, emptyTxt, emptyImgSrc) {
if (sView != null) {
slideView = sView;
}
//先将li全部隐藏掉
slideView.viewObj.children('ul').children('li').hide();
//如果空显示存在就不在往ul中添加 而是直接更新文字和图片
if (!$('div').hasClass('emptyView')) {
slideView.viewObj.children('ul').append(emptyHtml);
}
//更新文字和图片
if (emptyTxt != null && emptyTxt != '') {
$('.emptyDiv').empty().append(emptyTxt);
}
if (emptyImgSrc != null && emptyImgSrc != '') {
$('.emptyImg').show();
$('.emptyImg').attr('src', emptyImgSrc);
}
isEmpty = true;
}
//设置不为空的时候
u.slide.noEmpty = function () {
$('.emptyView').remove();
slideView.viewObj.children('ul').children('li').show();
}
//设置没有更多数据了
u.slide.noMore = function (sView) {
isNoMore = true;
if (sView != null) {
slideView = sView;
}
slideView.viewObj.children('ul').append(loadMoreHtml);
$("#pullFooter").empty();
$("#pullFooter").text('没有更多了~');
}
/*end*/
window.$pulltorefresh = u;
})(window);
2.使用pulltorefresh.css
/*滑动内容框*/
.slide_content {
width: 100%;
height: 100%;
overflow-y: scroll;
}
/*下拉刷新loading的样式*/
.loadEffect {
width: 20px;
height: 20px;
position: relative;
margin: 0 auto;
margin-top: 100px;
}
.pull_loading {
width: 18px;
height: 18px;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation: rotate 3s linear infinite;
-moz-animation: rotate 3s linear infinite;
-o-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg)
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg)
}
to {
-moz-transform: rotate(359deg)
}
}
@-o-keyframes rotate {
from {
-o-transform: rotate(0deg)
}
to {
-o-transform: rotate(359deg)
}
}
@keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(359deg)
}
}
3.在需要使用的html页面中导入相应的js与css
例：
交易明细