pull2
Version:
提供了下拉刷新、滚动底部加载组件。原生 js 开发，不依赖任何框架，也可以集成到任何框架。
3 lines (2 loc) • 19.6 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).pull2={})}(this,(function(t){"use strict";var e=function(t,i){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},e(t,i)};function i(t,i){if("function"!=typeof i&&null!==i)throw new TypeError("Class extends value "+String(i)+" is not a constructor or null");function n(){this.constructor=t}e(t,i),t.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}var n=function(){return n=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},n.apply(this,arguments)};function o(t,e,i,n){return new(i||(i=Promise))((function(o,s){function r(t){try{c(n.next(t))}catch(t){s(t)}}function l(t){try{c(n.throw(t))}catch(t){s(t)}}function c(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(r,l)}c((n=n.apply(t,e||[])).next())}))}function s(t,e){var i,n,o,s,r={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return s={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function l(l){return function(c){return function(l){if(i)throw new TypeError("Generator is already executing.");for(;s&&(s=0,l[0]&&(r=0)),r;)try{if(i=1,n&&(o=2&l[0]?n.return:l[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,l[1])).done)return o;switch(n=0,o&&(l=[2&l[0],o.value]),l[0]){case 0:case 1:o=l;break;case 4:return r.label++,{value:l[1],done:!1};case 5:r.label++,n=l[1],l=[0];continue;case 7:l=r.ops.pop(),r.trys.pop();continue;default:if(!(o=r.trys,(o=o.length>0&&o[o.length-1])||6!==l[0]&&2!==l[0])){r=0;continue}if(3===l[0]&&(!o||l[1]>o[0]&&l[1]<o[3])){r.label=l[1];break}if(6===l[0]&&r.label<o[1]){r.label=o[1],o=l;break}if(o&&r.label<o[2]){r.label=o[2],r.ops.push(l);break}o[2]&&r.ops.pop(),r.trys.pop();continue}l=e.call(t,r)}catch(t){l=[6,t],n=0}finally{i=o=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,c])}}}"function"==typeof SuppressedError&&SuppressedError;var r=function(t){return null!=t&&t===(null==t?void 0:t.window)},l="object"==typeof window&&window&&"ontouchstart"in window,c={start:l?"touchstart":"mousedown",move:l?"touchmove":"mousemove",end:l?"touchend":"mouseup",cancel:"touchcancel"};function a(t){return t===document.body||t===document.documentElement?Math.max(document.body.scrollTop,document.documentElement.scrollTop):"scrollTop"in t?t.scrollTop:t.scrollY}function h(t){var e=0,i=0;return"number"==typeof t.clientX&&"number"==typeof t.clientY?(e=t.clientX,i=t.clientY):t.touches&&t.touches[0]?(e=t.touches[0].clientX,i=t.touches[0].clientY):t.changedTouches&&t.changedTouches[0]&&(e=t.changedTouches[0].clientX,i=t.changedTouches[0].clientY),{clientX:e,clientY:i}}function u(t){return"number"==typeof t?"".concat(t,"px"):t}function d(t,e){return Object.prototype.hasOwnProperty.call(t,e)}function p(t,e){void 0===e&&(e=300);var i=this,n=Date.now(),o=!1,s=[];return function(){for(var r=[],l=0;l<arguments.length;l++)r[l]=arguments[l];if(s=r,!o){var c=Date.now(),a=c-n;a>=e?(n=c,t.call(i,s)):(o=!0,setTimeout((function(){o=!1,n=Date.now(),t.call(i,s)}),e-a))}}}function f(t){return Array.isArray(t)?t:t&&"string"==typeof t?[t]:[]}var m=function(){function t(t){this.el=t||document.createElement("div"),this.handler={},this.isUnmounted=!1,this.transitionTimer=null}return t.prototype.on=function(t,e,i){this.isUnmounted||(this.handler[t]||(this.handler[t]=[]),this.handler[t].push(e),this.el.addEventListener(t,e,i))},t.prototype.off=function(t,e,i){this.isUnmounted||this.el.removeEventListener(t,e,i)},t.prototype.setAttrs=function(t){if(!this.isUnmounted&&t&&"object"==typeof t)for(var e in t)d(t,e)&&this.el.setAttribute(e,t[e])},t.prototype.setStyle=function(t){if(!this.isUnmounted&&t&&"object"==typeof t)for(var e in t)d(t,e)&&(this.el.style[e]=t[e])},t.prototype.updateTransition=function(t,e){void 0===t&&(t=!1),void 0===e&&(e="all");var i=t?"".concat(e," .3s"):"";this.setStyle({transition:i})},t.prototype.html=function(t){this.isUnmounted||(this.el.innerHTML=t)},t.prototype.getHeight=function(){var t;return(null===(t=this.el)||void 0===t?void 0:t.clientHeight)||0},t.prototype.setHeight=function(t){this.setStyle({height:u(t)})},t.prototype.setTransitionHeight=function(t){var e,i=this;this.isUnmounted||(clearTimeout(this.transitionTimer),this.updateTransition(!0,"height"),null==(e=this.el)||e.scrollTop,this.setHeight(t),this.transitionTimer=setTimeout((function(){i.updateTransition(!1)}),300))},t.prototype.addClass=function(t){if(!this.isUnmounted){var e=f(t);if(!(e.length<=0)){var i=this.el.getAttribute("class"),n=(i?i.split(" "):[]).filter((function(t){return-1===e.indexOf(t)})).concat(e);this.setAttrs({class:n.join(" ")})}}},t.prototype.removeClass=function(t){if(!this.isUnmounted){var e=f(t);if(!(e.length<=0)){var i=this.el.getAttribute("class"),n=(i?i.split(" "):[]).filter((function(t){return-1===e.indexOf(t)}));this.setAttrs({class:n.join(" ")})}}},t.prototype.show=function(){this.setStyle({display:"block"})},t.prototype.hide=function(){this.setStyle({display:"none"})},t.prototype.destroy=function(){var t;if(!this.isUnmounted){for(var e in this.handler){if(this.handler[e].length>0){for(var i=0;i<this.handler[e].length;i++)this.off(e,this.handler[e][i]);this.handler[e].length=0}delete this.handler[e]}null===(t=this.el.parentNode)||void 0===t||t.removeChild(this.el),this.isUnmounted=!0}},t}();function v(t,e){void 0===e&&(e={});var i=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}var y,w,g;v("@-webkit-keyframes pull2-animate-spin {\n 0% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@keyframes pull2-animate-spin {\n 0% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n.pull2-icon {\n display: inline-block;\n box-sizing: content-box;\n vertical-align: middle;\n}\n.pull2-icon-spin {\n -webkit-animation: pull2-animate-spin 1s linear infinite;\n animation: pull2-animate-spin 1s linear infinite;\n}\n.pull2-icon-circle {\n position: relative;\n width: 10px;\n height: 10px;\n border: 2px solid #009def;\n border-right-color: transparent;\n border-radius: 50%;\n}\n.pull2-icon-x {\n position: relative;\n width: 14px;\n height: 14px;\n}\n.pull2-icon-x::before,\n.pull2-icon-x::after {\n position: absolute;\n top: 0;\n left: 6px;\n width: 2px;\n height: 14px;\n background: #ee693b;\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n content: '';\n}\n.pull2-icon-x::after {\n -webkit-transform: rotate(135deg);\n transform: rotate(135deg);\n}\n.pull2-icon-check {\n display: inline-block;\n width: 12px;\n height: 6px;\n margin-top: -3px;\n border: 2px solid #13b418;\n border-width: 0 0 2px 2px;\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n}\n.pull2-to-refresh {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 40px;\n color: #777;\n font-size: 14px;\n}\n.pull2-to-refresh .pull2-icon {\n margin-right: 5px;\n}\n"),function(t){t.Default="default",t.Drop="drop",t.Loading="loading",t.Success="success",t.Failed="failed"}(g||(g={}));var x,b,T,k=((y={})[g.Default]='<span class="pull2-icon pull2-icon-circle"></span><%=text%>',y[g.Drop]='<span class="pull2-icon pull2-icon-circle"></span><%=text%>',y[g.Loading]='<span class="pull2-icon pull2-icon-circle pull2-icon-spin"></span><%=text%>',y[g.Success]='<span class="pull2-icon pull2-icon-check"></span><%=text%>',y[g.Failed]='<span class="pull2-icon pull2-icon-x"></span><%=text%>',y),L=((w={})[g.Default]="下拉刷新",w[g.Drop]="释放刷新",w[g.Loading]="刷新中...",w[g.Success]="刷新成功",w[g.Failed]="刷新失败",w),S="pull2-to-refresh",E=function(t){function e(e){var i=t.call(this)||this;return i.tplMarkText="<%=text%>",i.state=g.Default,i.options=n(n({scrollView:document.documentElement},e),{text:n(n({},L),null==e?void 0:e.text),dom:n(n({},k),null==e?void 0:e.dom)}),i.addClass([S,"".concat(S,"-").concat(i.state)]),i.setStyle({height:"0px",overflow:"hidden"}),i.html(i.getHtml(i.state)),i.render(),i}return i(e,t),e.prototype.__getWrapper=function(t){return r(t)||t===document.documentElement?document.body:t},e.prototype.render=function(){var t=this.options.scrollView,e=this.__getWrapper(t);e.firstChild?e.insertBefore(this.el,e.firstChild):e.append(this.el)},e.prototype.updateOptions=function(t){var e=!1;t.scrollView&&t.scrollView!==this.options.scrollView&&(e=!0,this.__getWrapper(this.options.scrollView).removeChild(this.el)),this.options=n(n(n({},this.options),t),{text:n(n({},this.options.text),null==t?void 0:t.text),dom:n(n({},this.options.dom),null==t?void 0:t.dom)}),this.setState(this.state,!0),e&&this.render()},e.prototype.getHtml=function(t){var e=this.options,i=e.dom,n=e.text;return i[t]?i[t].replace(this.tplMarkText,n[t]):""},e.prototype.setState=function(t,e){if(void 0===e&&(e=!1),this.state!==t||e){if(!d(this.options.dom,t))throw"RefreshView 不支持 "+t+" 状态";this.state!==t&&(this.removeClass("".concat(S,"-").concat(this.state)),this.state=t,this.addClass("".concat(S,"-").concat(this.state)));var i=this.getHtml(t);this.html(i)}},e}(m),V=function(){function t(t){if(this.options=n({height:40,distance:60,unmovableStayTime:3e3,completionStayTime:500,scrollView:document.documentElement,isPullDown:function(t){return t>=0}},t),!this.options.onRefresh)throw"PullToRefresh 需要设置 onRefresh 回调方法";this.touchesStart={x:0,y:0},this.diffY=0,this.isTouch=!1,this.isMove=!1,this.isLock=!1,this.isUnmouted=!1,this.calledLock=!1,this.lockTimer=null,this.completionStayTimer=null,this.__timerFixSlideOutScreen=null,this.handler={start:this.fnTouchstart.bind(this),move:this.fnTouchmove.bind(this),end:this.fnTouchend.bind(this)},this.init()}return t.prototype.init=function(){var t=this.options,e=t.dom,i=t.text,n=t.scrollView;this.view=new E({dom:e,text:i,scrollView:n}),this.bindEvent()},t.prototype.bindEvent=function(){this.isUnmouted||this.options.scrollView.addEventListener(c.start,this.handler.start,{passive:!1})},t.prototype.unbindEvent=function(){this.isUnmouted||(this.options.scrollView.removeEventListener(c.start,this.handler.start),this.unbindDocumentEvent())},t.prototype.bindDocumentEvent=function(){document.addEventListener(c.move,this.handler.move,{passive:!1}),document.addEventListener(c.end,this.handler.end,{passive:!1}),document.addEventListener(c.cancel,this.handler.end,{passive:!1})},t.prototype.unbindDocumentEvent=function(){document.removeEventListener(c.move,this.handler.move),document.removeEventListener(c.end,this.handler.end),document.removeEventListener(c.cancel,this.handler.end)},t.prototype.fnTouchstart=function(t){if(this.view.state===g.Default&&!this.isLock&&!(a(this.options.scrollView)>0)){this.bindDocumentEvent(),this.isTouch=!0,this.isMove=!1,this.diffY=0,this.view.updateTransition(!1);var e=h(t),i=e.clientX,n=e.clientY;this.touchesStart.x=i,this.touchesStart.y=n}},t.prototype.fnTouchmove=function(t){var e=this;if(this.isTouch){var i=h(t),n=i.clientX,o=i.clientY-this.touchesStart.y;if(!this.isMove){if(0===n-this.touchesStart.x&&0===o)return void t.preventDefault();if(!this.options.isPullDown(o))return void(this.isTouch=!1);this.isMove=!0}t.preventDefault();var s=this.options,r=s.unmovableStayTime,l=s.distance;this.diffY=o,clearTimeout(this.__timerFixSlideOutScreen),this.__timerFixSlideOutScreen=setTimeout((function(){e.fnTouchend()}),r);var c=0;this.diffY<=l?(c=this.diffY,this.view.setState(g.Default)):this.diffY>l&&this.diffY<=2*l?(c=l+.5*(this.diffY-l),this.view.setState(g.Drop)):c=l+.5*l+.2*(this.diffY-2*l),this.view.setHeight(Math.max(c,0))}},t.prototype.fnTouchend=function(){return o(this,void 0,void 0,(function(){var t,e,i,n,o=this;return s(this,(function(s){switch(s.label){case 0:return clearTimeout(this.__timerFixSlideOutScreen),this.unbindDocumentEvent(),this.isTouch&&this.isMove?(t=this.options,e=t.distance,i=t.completionStayTime,this.isTouch=!1,this.isMove=!1,this.internalLock(),n=300,this.diffY>e?[4,this.triggerRefresh()]:[3,2]):(this.isTouch=!1,this.isMove=!1,[2]);case 1:return s.sent(),n+=i,[3,3];case 2:this.view.setTransitionHeight(0),s.label=3;case 3:return this.lockTimer=setTimeout((function(){o.internalUnlock()}),n),[2]}}))}))},t.prototype.resetView=function(){var t=this;this.completionStayTimer=setTimeout((function(){t.view.setTransitionHeight(0),t.completionStayTimer=setTimeout((function(){t.view.setState(g.Default)}),300)}),this.options.completionStayTime)},t.prototype.triggerRefresh=function(){var t=this;if(!this.isUnmouted&&this.view.state!==g.Loading)return clearTimeout(this.completionStayTimer),this.view.setState(g.Loading),this.view.setTransitionHeight(this.options.height),this.options.onRefresh().then((function(){t.view.setState(g.Success)})).catch((function(){t.view.setState(g.Failed)})).finally((function(){t.resetView()}))},t.prototype.internalLock=function(){clearTimeout(this.lockTimer),this.isLock=!0},t.prototype.internalUnlock=function(){clearTimeout(this.lockTimer),this.calledLock||(this.isLock=!1)},t.prototype.lock=function(){this.calledLock=!0,this.internalLock()},t.prototype.unlock=function(){this.calledLock=!1,this.internalUnlock()},t.prototype.updateOptions=function(t){var e=!1;(null==t?void 0:t.scrollView)&&t.scrollView!==this.options.scrollView&&(e=!0,this.unbindEvent()),this.options=n(n({},this.options),t);var i=this.options,o=i.text,s=i.dom,r=i.scrollView;this.view.updateOptions({text:o,dom:s,scrollView:r}),e&&this.bindEvent()},t.prototype.destroy=function(){this.isUnmouted||(this.internalLock(),this.unbindEvent(),this.view.destroy(),this.isUnmouted=!0)},t.prototype.resume=function(){this.isUnmouted&&(this.isUnmouted=!1,this.init(),this.internalUnlock())},t}();v(".pull2-load-more {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 44px;\n color: #777;\n font-size: 14px;\n}\n"),function(t){t.Default="default",t.Loading="loading",t.Failed="failed",t.Done="done"}(T||(T={}));var U=((x={})[T.Default]="<%=text%>",x[T.Loading]="<%=text%>",x[T.Failed]="<%=text%>",x[T.Done]="<%=text%>",x),D=((b={})[T.Default]="上拉或点击加载更多",b[T.Loading]="正在加载",b[T.Failed]="加载失败，点击重试",b[T.Done]="已全部加载",b),_="pull2-load-more",O=function(t){function e(e){var i=t.call(this)||this;return i.tplMarkText="<%=text%>",i.state=T.Default,i.options=n(n({scrollView:document.documentElement},e),{text:n(n({},D),null==e?void 0:e.text),dom:n(n({},U),null==e?void 0:e.dom)}),i.addClass([_,"".concat(_,"-").concat(i.state)]),i.html(i.getHtml(i.state)),i.render(),i}return i(e,t),e.prototype.__getWrapper=function(t){return r(t)||t===document.documentElement?document.body:t},e.prototype.render=function(){var t=this.options.scrollView;this.__getWrapper(t).appendChild(this.el)},e.prototype.updateOptions=function(t){var e=!1;t.scrollView&&t.scrollView!==this.options.scrollView&&(e=!0,this.__getWrapper(this.options.scrollView).removeChild(this.el)),this.options=n(n(n({},this.options),t),{text:n(n({},this.options.text),null==t?void 0:t.text),dom:n(n({},this.options.dom),null==t?void 0:t.dom)}),this.setState(this.state,!0),e&&this.render()},e.prototype.getHtml=function(t){var e=this.options,i=e.dom,n=e.text;return i[t]?i[t].replace(this.tplMarkText,n[t]):""},e.prototype.setState=function(t,e){if(void 0===e&&(e=!1),this.state!==t||e){if(!d(this.options.dom,t))throw"RefreshView 不支持 "+t+" 状态";this.state!==t&&(this.removeClass("".concat(_,"-").concat(this.state)),this.state=t,this.addClass("".concat(_,"-").concat(this.state)));var i=this.getHtml(t);this.html(i)}},e}(m),C=function(){function t(t){if(this.options=n({threshold:100,scrollView:document.documentElement,throttleWaitTime:50,isNoMore:function(){return!1},autoCheckOnContentUpdate:!0},t),!this.options.onScrollLower)throw"ScrollToLoadMore 需要设置 onScrollLower 回调方法";this.isUnmouted=!1,this.isLock=!1,this.calledLock=!1,this.handler={click:this.clickView.bind(this),scroll:p.call(this,this.scroll,this.options.throttleWaitTime>0?this.options.throttleWaitTime:0)},this.init()}return t.prototype.init=function(){var t=this.options,e=t.text,i=t.dom,n=t.scrollView;this.view=new O({text:e,dom:i,scrollView:n}),this.bindEvent()},t.prototype.clickView=function(){this.isLock||this.view.state!==T.Default&&this.view.state!==T.Failed||this.triggerLoad()},t.prototype.scroll=function(){this.isLock||this.isUnmouted||this.view.state!==T.Default||this.checkLoad()},t.prototype.checkLoad=function(){var t,e=this.options,i=e.scrollView,n=e.threshold,o=(t=i,"undefined"==typeof window?0:r(t)?document.documentElement.clientHeight:t.clientHeight),s=function(t){return void 0===t&&(t=window),"undefined"==typeof window?0:r(t)?document.documentElement.scrollHeight:t.scrollHeight}(i),l=a(i);0===o&&0===s||s-(n>0?n:0)<=o+l&&this.triggerLoad()},t.prototype.bindEvent=function(){var t=this.options.scrollView;this.view.on("click",this.handler.click);var e=t;t===document.documentElement&&(e=window),e.addEventListener("scroll",this.handler.scroll)},t.prototype.unbindEvent=function(){var t=this.options.scrollView;this.view.off("click",this.handler.click);var e=t;t===document.documentElement&&(e=window),e.removeEventListener("scroll",this.handler.scroll)},t.prototype.triggerLoad=function(){var t=this;if(!this.isUnmouted&&this.view.state!==T.Loading){this.internalLock(),this.view.setState(T.Loading);var e=this.options,i=e.onScrollLower,n=e.isNoMore,o=e.autoCheckOnContentUpdate;return i().then((function(e){return t.internalUnlock(),n(e)?t.view.setState(T.Done):(t.view.setState(T.Default),o&&t.checkLoad()),e})).catch((function(){t.view.setState(T.Failed),t.internalUnlock()}))}},t.prototype.reset=function(){this.view.setState(T.Default)},t.prototype.updateOptions=function(t){var e=!1;(null==t?void 0:t.scrollView)&&t.scrollView!==this.options.scrollView&&(e=!0,this.unbindEvent()),"number"==typeof(null==t?void 0:t.throttleWaitTime)&&t.throttleWaitTime!==this.options.throttleWaitTime&&(this.handler.scroll=p.call(this,this.scroll,t.throttleWaitTime>0?t.throttleWaitTime:0)),this.options=n(n({},this.options),t);var i=this.options,o=i.text,s=i.dom,r=i.scrollView;this.view.updateOptions({text:o,dom:s,scrollView:r}),e&&this.bindEvent()},t.prototype.internalLock=function(){this.isLock=!0},t.prototype.internalUnlock=function(){this.calledLock||(this.isLock=!1)},t.prototype.lock=function(){this.calledLock=!0,this.internalLock()},t.prototype.unlock=function(){this.calledLock=!1,this.internalUnlock()},t.prototype.destroy=function(){this.isUnmouted||(this.internalLock(),this.unbindEvent(),this.view.destroy(),this.isUnmouted=!0)},t.prototype.resume=function(){this.isUnmouted&&(this.isUnmouted=!1,this.init(),this.internalUnlock())},t}();t.PullToRefresh=V,t.ScrollToLoadMore=C}));
//# sourceMappingURL=pull2.min.js.map