上次开发笔记里《基于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;}