在上一篇开发笔记《基于zepto和WeUI的H5页面开发笔记》中提到了下拉刷新功能。这是一个非常基本和常用的功能。为了方便下次使用，简单封装了看一下KScroll.js的简单例子。下面是一个基于zepto和WeUI拉取刷新列表的例子：demo.html
第一章
第二章
第三章图
标题文字4
标题文字5
标题文字6
标题文字7
第8章
标题文字${(toPage-1)*pageInfo.pageSize+index+1}
`;$(ks.option.loadMoreEle).before(addHtmlStr);ks.refreshed(toPage,toPage==pageInfo.total);},1500);}});});KSCroll.js是一个基于zepto的简单上拉和刷新插件。前提是调用者在接口中添加了一个loadmore元素。回调pullToRefresh函数，调用者请求数据刷新DOM；3、最后调用者调用refreshed方法更新上拉刷新的状态（数据是否加载完成），KScroll判断如果是结束状态，隐藏loadmore元素。constKScroll=function(opt){const_this=this;_this.option={containerEle:$('.kscroll-container')[0],contentEle:$('.kscroll-content')[0],loadMoreEle:$(".kscroll-container.weui-loadmore")[0],touchStatus:0,//0init1移动当前状态，移动正在进行中touchmovepage:1,//页数scrollToNext:false,//滚动满足刷新下一页的标志isEnd:false,//是否已经滑到底部，用于判断是否处理滚动（如果只有一页，需要设置为true，不需要滚动加载）loading:false,//加载标志pullToRefresh:undefined//满足滑动刷新加载数据的回调函数};_this.option=Object.assign({},_this.option,opt);//加载数据后回调refresh_this.refreshed=function(page,isEnd){//加载页数isEnd已经加载到底部_this.option.loading=false;如果（isEnd）{_this.option.isEnd=true;$(_this.option.loadMoreEle).remove();}}//初始化动作（监听触摸事件）_this.init=()=>{//监听初始手指触摸$(_this.option.contentEle).on("touchstart",函数(e){如果(_this.option.isEnd)返回；_this.option.touchStatus=1;});//向上判断时，如果滚动条在顶部，则逐渐增加上拉刷新的高度$(_this.option.contentEle).on("touchmove",function(e){if(_this.option.isEnd)return;if(!_this.option.scrollToNext){varaa=$(_this.option.containerEle).height();varbb=$(this).scrollTop();varcc=$(this).height();vardd=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.页++；_this.option.pullToRefresh&&_this.option.pullToRefresh(_this.option.page);_this.option.scrollToNext=false;}_this.option.touchStatus=0;});}_this.init();//初始化动作（监听触摸事件）}Others本文只是一个简单的（zepto。基于原生js）《写了一个下拉刷新插件》，有需要的可以参考一下，谢谢作者，我也会在这里标注一下。