上次开发笔记里《基于zepto和WeUI的H5页面开发笔记》提到下拉刷新性能，这是很根本很罕用的性能，为了下次本人更便捷的应用，便简略的封装了一下 GScroll.js
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>基于WeUI和zepto.js的列表下拉刷新样例</title>
<!-- 引入 WeUI CDN 链接 -->
<link rel="stylesheet" href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.5.6/weui.css" />
<!-- 引入 zepto CDN 链接 -->
<script src="https://cdnjs.gtimg.com/cdnjs/libs/zepto/1.1.4/zepto.js"></script>
<!-- 引入 自定义滚动刷新 -->
<script src="./GScroll.js"></script>
<style>
html,
body {
height: 100%;
}
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
color: var(--weui-FG-0);
}
.page {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
z-index: 1;
}
.page__bd {
height: 100%;
overflow: hidden;
}
.part-content {
padding: 5px;
}
.g-scroll-container {
height: 60%;
border: 1px solid #e5e5e5;
overflow: auto;
}
</style>
</head>
<body data-weui-theme="light">
<div class="container" id="container">
<div class="page">
<div class="page__bd">
<!-- 第二个tab的panel内容 -->
<div style="height: 40%;">
<div class="part-content">
<h5>下拉刷新样例</h5>
const gs = <b>GScroll</b>(option);<br />
<b>option:</b><br />
containerEle //滚动内容的容器元素<br />
contentEle //滚动的内容元素<br />
loadMoreEle //滚动的内容里的最初的加载更多的元素<br />
<b>pullToRefresh</b> //加载下一页的数据的钩子函数<br />
//加载完渲染完，回调<b>gs.refreshed(page,isEnd)</b>更新状态
<br />
</div>
</div>
<div class="g-scroll-container">
<div class="weui-cells g-scroll-content">
<div role="option" class="weui-cell ">
<div class="weui-cell__bd">
<p>题目文字1</p>
</div>
</div>
<div role="option" class="weui-cell ">
<div class="weui-cell__bd">
<p>题目文字2</p>
</div>
</div>
<div role="option" class="weui-cell ">
<div class="weui-cell__bd">
<p>题目文字3</p>
</div>
</div>
<div role="option" class="weui-cell ">
<div class="weui-cell__bd">
<p>题目文字4</p>
</div>
</div>
<div role="option" class="weui-cell ">
<div class="weui-cell__bd">
<p>题目文字5</p>
</div>
</div>
<div role="option" class="weui-cell ">
<div class="weui-cell__bd">
<p>题目文字6</p>
</div>
</div>
<div role="option" class="weui-cell ">
<div class="weui-cell__bd">
<p>题目文字7</p>
</div>
</div>
<div role="option" class="weui-cell ">
<div class="weui-cell__bd">
<p>题目文字8</p>
</div>
</div>
<div role="alert" class="weui-loadmore">
<span aria-hidden="true" role="img" aria-label="加载中" class="weui-primary-loading">
<i class="weui-primary-loading__dot"></i>
</span>
<span class="weui-loadmore__tips">正在加载</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
const pageInfo = {
total: 3,
pageSize: 8
}
// 下拉滚动刷新
const gs = GScroll({
containerEle: $('.g-scroll-container')[0], //滚动内容的容器元素
contentEle: $('.g-scroll-content')[0], //滚动的内容元素
loadMoreEle: $(".g-scroll-container .weui-loadmore")[0], //滚动的内容里的最初的加载更多的元素
pullToRefresh: function (toPage) {
//加载下一页的数据渲染，并回调 gs.refreshed(page,isEnd)
setTimeout(function () {
let addHtmlStr = '';
for (let index = 0; index < pageInfo.pageSize; index++) {
addHtmlStr += ` <div role="option" class="weui-cell weui-cell_example">
<div class="weui-cell__bd">
<p>题目文字${(toPage-1)*pageInfo.pageSize+index+1}</p>
</div>
</div>`;
}
$(gs.loadMoreEle).before(addHtmlStr);
gs.refreshed(toPage, toPage == pageInfo.total);
}, 1500);
}
});
});
</script>
</body>
</html>GScroll.js
const GScroll = function (opt) {
const basicOption = {
containerEle: $('.gscroll-container')[0],
contentEle: $('.gscroll-content')[0],
loadMoreEle: $(".gscroll-container .weui-loadmore")[0],
touchStatus: 0, // 0 init 1 move 以后状态，move为正在touchmove
page: 1, //页数
scrollToNext: false, //滚动满足刷新下一页的标记
isEnd: false, //是否曾经滑到底部了，用于判断是否解决滚动 (如果只有一页，需设置为true，无需滚动加载)
loading: false, //正在加载数据的标记
pullToRefresh: undefined //满足滑动刷新加载数据的回调函数
};
const _thisGS = Object.assign({}, basicOption, opt);
//加载数据刷新后回调
_thisGS.refreshed = function (page, isEnd) { //page 加载的页数 isEnd 是否曾经加载到底部了
_thisGS.loading = false;
if (isEnd) {
_thisGS.isEnd = true;
$(_thisGS.loadMoreEle).remove();
}
}
//监听手指初始触碰
$(_thisGS.contentEle).on("touchstart", function (e) {
if (_thisGS.isEnd) return;
_thisGS.touchStatus = 1;
});
//判断向上时，如果滚动条在顶部，那么逐步减少下拉刷新的高度
$(_thisGS.contentEle).on("touchmove", function (e) {
if (_thisGS.isEnd) return;
if (!_thisGS.scrollToNext) {
var aa = $(_thisGS.containerEle).height();
var bb = $(this).scrollTop();
var cc = $(this).height();
var dd = aa - bb - cc;
if (dd < 50) {
_thisGS.scrollToNext = true;
}
}
});
//下拉刷新高度达到肯定值之后刷新页面
$(_thisGS.contentEle).on("touchend", function (e) {
if (_thisGS.isEnd) return;
if (_thisGS.touchStatus == 1 && _thisGS.scrollToNext && !_thisGS.loading) {
// console.log(`申请第${_thisGS.page}列表数据`);
_thisGS.loading = true;
_thisGS.page++;
_thisGS.pullToRefresh && _thisGS.pullToRefresh(_thisGS.page);
_thisGS.scrollToNext = false;
}
_thisGS.touchStatus = 0;
});
return _thisGS;
}
发表回复