上次开发笔记里《基于zepto和WeUI的H5页面开发笔记》提到上拉刷新功能，这是很基本很常用的功能，为了下次自己更便捷的使用，便简单的封装了一下 KScroll.js
简单样例
这里先上一个基于zepto和WeUI的列表上拉刷新的例子：
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="./KScroll.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 ks = <b>new KScroll</b>(option);<br />
<b>option:</b><br />
containerEle //滚动内容的容器元素<br />
contentEle //滚动的内容元素<br />
loadMoreEle //滚动的内容里的最后的加载更多的元素<br />
<b>pullToRefresh</b> //加载下一页的数据的钩子函数<br />
//加载完渲染完，回调<b>ks.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">
// 引入下面js
</script>
</body>demo.js
$(function () {
const pageInfo = {
total: 3,
pageSize: 8
}
const ks = new KScroll({
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>`;
}
$(ks.option.loadMoreEle).before(addHtmlStr);
ks.refreshed(toPage, toPage == pageInfo.total);
}, 1500);
}
});
});KSCroll.js
基于zepto的简单的上拉刷新插件，前提为调用者在界面添加了loadmore的元素。
KScroll主要是
1、监听touch事件，判断是否滚动到了底部；
2、达到加载下一页的条件则回调pullToRefresh函数，调用者在这请求数据刷新DOM；
3、最后调用者调用refreshed方法更新上拉刷新的状态（数据是否已经加载完毕），KScroll判断如果是结束状态则隐藏loadmore元素。
const KScroll = function (opt) {
const _this = this;
_this.option = {
containerEle: $('.kscroll-container')[0],
contentEle: $('.kscroll-content')[0],
loadMoreEle: $(".kscroll-container .weui-loadmore")[0],
touchStatus: 0, // 0 init 1 move 当前状态，move为正在touchmove
page: 1, //页数
scrollToNext: false, //滚动满足刷新下一页的标志
isEnd: false, //是否已经滑到底部了，用于判断是否处理滚动 (如果只有一页，需设置为true，无需滚动加载)
loading: false, //正在加载中标志
pullToRefresh: undefined //满足滑动刷新加载数据的回调函数
};
_this.option = Object.assign({}, _this.option, opt);
//加载数据刷新后回调
_this.refreshed = function (page, isEnd) { //page 加载的页数 isEnd 是否已经加载到底部了
_this.option.loading = false;
if (isEnd) {
_this.option.isEnd = true;
$(_this.option.loadMoreEle).remove();
}
}
//初始化动作（监听touch事件）
_this.init = () => {
//监听手指初始触碰
$(_this.option.contentEle).on("touchstart", function (e) {
if (_this.option.isEnd) return;
_this.option.touchStatus = 1;
});
//判断向上时，如果滚动条在顶部，那么逐渐增加上拉刷新的高度
$(_this.option.contentEle).on("touchmove", function (e) {
if (_this.option.isEnd) return;
if (!_this.option.scrollToNext) {
var aa = $(_this.option.containerEle).height();
var bb = $(this).scrollTop();
var cc = $(this).height();
var dd = aa - bb - cc;
if (dd < 50) {
_this.option.scrollToNext = true;
}
}
});
//上拉刷新高度达到一定值之后刷新页面
$(_this.option.contentEle).on("touchend", function (e) {
if (_this.option.isEnd) return;
if (_this.option.touchStatus == 1 && _this.option.scrollToNext && !_this.option.loading) {
_this.option.loading = true;
_this.option.page++;
_this.option.pullToRefresh && _this.option.pullToRefresh(_this.option.page);
_this.option.scrollToNext = false;
}
_this.option.touchStatus = 0;
});
}
_this.init(); //初始化动作（监听touch事件）
}其他
本文只是自己写的没有动画的简单的（基于zepto.js的）上拉刷新插件。
关于下拉刷新（带回弹动画）我看了一个效果看着还不错的（基于原生js的）《写了一个下拉刷新插件》，亲们需要可参考，谢谢作者，在这我也mark一下。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。