简易h5下拉刷新插件
2017-12-28 本文已影响0人
不会吃鱼的小猫
前言：第一次写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 = '<img class="pull_loading" src="static/images/loading.png">';
var refreshHeadHtml =
"<li id='pullHeader' style='height: " + tempHeight + "px;" +
"max-height:.8rem;display:flex;align-items: center;justify-content: center;border: none;'>" +
"<div id='pullHeader_tip' style='margin-left: 10px;'>下拉立即刷新</div>" +
"</li>";
var loadMoreHtml =
"<div id='pullFooter' style='height:.8rem;display:flex;"
+ "align-items: center;justify-content: center;border: none;'>" +
loadingHtml +
"<div id='pullHeader_tip' style='margin-left: 10px;'>正在加载...</div>" +
"</div>";
var emptyHtml =
"<div class='emptyView' style='height: 100%;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;border: none;'>" +
"<img class='emptyImg' src='' style='display: none;width: 3.2rem;height: 2.4rem;'>" +
"<div class='emptyDiv' style='margin-top: .32rem;margin-left: .6rem;margin-right: .6rem; text-align: center;'>暂无数据~</div>" +
"</div>";
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
例：
<!DOCTYPE html>
<html>
<head>
<title>交易明细</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
<link rel="stylesheet" href="static/css/common.css"/>
<link rel="stylesheet" href="static/css/style.css"/>
<link rel="stylesheet" href="static/css/pullToRefresh.css"/>
</head>
<body>
<div class="wrapper white-bg" id="pageView">
<section class="container">
<div class="slide_content" id="slideView">
<ul class="tranList">
<li v-for="item in datas" class="display_column center_h">
<div class="display_row smallText text-black">
<div class="flex_1 align_left">{{item.name}}</div>
<div class="flex_1 align_right">￥{{item.pay_money}}</div>
</div>
<div class="display_row x_smallText" style="margin-top: 0.16rem;">
<div class="flex_1 align_left">{{item.pay_time}}</div>
<div class="flex_1 align_right">{{item.qrcode}}</div>
</div>
</li>
</ul>
</div>
</section>
</div>
</body>
<script type="text/javascript" src="static/js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="static/js/rem.js"></script>
<script type="text/javascript" src="static/js/main.js"></script>
<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript" src="static/js/base.js"></script>
<script type="text/javascript" src="static/js/pullToRefresh.js"></script>
</body>
<script type="text/javascript">
$(function () {
var appVue = new Vue({
el: '#pageView',
data: {
datas: [
{
id: 10001,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.00',
qrcode: '1000000001'
},
{
id: 10002,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.20',
qrcode: '1000000002'
},{
id: 10002,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.20',
qrcode: '1000000002'
},{
id: 10002,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.20',
qrcode: '1000000002'
},{
id: 10002,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.20',
qrcode: '1000000002'
},{
id: 10002,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.20',
qrcode: '1000000002'
},{
id: 10002,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.20',
qrcode: '1000000002'
},{
id: 10002,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.20',
qrcode: '1000000002'
},{
id: 10002,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.20',
qrcode: '1000000002'
},{
id: 10002,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.20',
qrcode: '1000000002'
},{
id: 10002,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.20',
qrcode: '1000000002'
},{
id: 10002,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.20',
qrcode: '1000000002'
},{
id: 10002,
name: '阿斌家-测试',
pay_time: '2017.12.12',
pay_money: '1.20',
qrcode: '1000000002'
},
],
},
mounted() {
$pulltorefresh.slide({
viewObj: $('#slideView'),
refresh: function (endRefresh) {
console.log("刷新")
setTimeout(function () {
endRefresh();
$pulltorefresh.slide.noMore()
}, 2000)
},
loadMore: function (endLoadMore) {
console.log("加载")
setTimeout(function () {
endLoadMore(true);
}, 2000)
}
})
$pulltorefresh.slide.noMore();
// $pulltorefresh.slide.empty();
$pulltorefresh.slide.empty(null, '啊偶，没有符合的结果，换个词试试', 'static/images/icon_search_empty.png')
},
watch: {},
methods: {}
})
});
</script>
</html>
