mtfscrolllist/dist/mtfscrolllist.js

Virtualized infinite scrolling list 虚拟化无限滚动 下拉刷新列表

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.MtfScrollList=t():e.MtfScrollList=t()}(this,(function(){return e={687:function(e){function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function i(e,t,i){return t&&n(e.prototype,t),i&&n(e,i),e}var o=function(e,t,n){var i=null;return function(){for(var o=this,r=arguments.length,l=new Array(r),s=0;s<r;s++)l[s]=arguments[s];n&&i&&(clearTimeout(i)||(i=null)),!i&&(i=setTimeout((function(){e.apply(o,l),i=null}),t))}},r=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)},l=function(){function e(){t(this,e),this.stack=[],this.height=0}return i(e,[{key:"isEmpty",value:function(){return 0===this.stack.length}},{key:"push",value:function(e){var t=e.ele,n=e.height;return this.height+=n||0,this.stack.push({ele:t,height:n})}},{key:"front",value:function(){return this.stack[this.stack.length-1]}},{key:"pop",value:function(){var e=this.stack.pop();return this.height-=e.height||0,e}},{key:"clear",value:function(){this.height=this.stack.length=0}}]),e}(),s=function(){function e(n){var i=n.self;t(this,e),this.self=i,this.firstChild=null,this.lastChild=null,this.cache={top:new l,bottom:new l}}return i(e,[{key:"paddingTop",value:function(e){return e&&(this.self.G.ele.style.paddingTop=e+"px"),0===e?this.self.G.ele.style.removeProperty("padding-top"):e||parseInt(this.self.G.ele.style.paddingTop)||0}},{key:"firstChildPaddingTop",value:function(e){this.firstChild.style.paddingTop=e+"px"}},{key:"lastChildPaddingBottom",value:function(e){this.lastChild.style.paddingBottom=e+"px"}},{key:"height",value:function(e){var t=e.currentStyle||window.getComputedStyle(e);return e.offsetHeight+parseInt(0|t.marginTop)+parseInt(0|t.marginBottom)}},{key:"prepend",value:function(e){var t=this,n=this.firstChild.nextSibling,i=document.createDocumentFragment();e.forEach((function(e){return i.appendChild(t.self.G.render({data:e,index:t.self.G.startIndex++}))})),this.self.G.ele.insertBefore(i,n)}},{key:"prependFromCache",value:function(){var e=this.cache.top.pop();if(e){var t=this.firstChild.nextSibling,n=document.createDocumentFragment();e.ele.forEach((function(e){return n.appendChild(e)})),this.self.G.ele.insertBefore(n,t),this.firstChildPaddingTop(this.cache.top.height)}}},{key:"append",value:function(e){var t=this,n=document.createDocumentFragment();e.forEach((function(e){return n.appendChild(t.self.G.render({data:e,index:t.self.G.startIndex++}))})),this.self.G.ele.insertBefore(n,this.lastChild)}},{key:"appendFromCache",value:function(){var e=this.cache.bottom.pop();if(e){var t=document.createDocumentFragment();e.ele.forEach((function(e){return t.appendChild(e)})),this.self.G.ele.insertBefore(t,this.lastChild),this.lastChildPaddingBottom(this.cache.bottom.height)}}},{key:"clearTop",value:function(){if(this.self.G.ele.children.length-2>this.self.G.perPage){for(var e=Array(this.self.G.perPage),t=-1,n=0;++t<this.self.G.perPage;)n+=this.height(e[t]=this.self.G.ele.children[1]),this.self.G.ele.removeChild(e[t]);this.cache.top.push({ele:e,height:n}),this.firstChildPaddingTop(this.cache.top.height)}}},{key:"clearBottom",value:function(){var e=this.self.G.ele.children.length-2-this.self.G.perPage;if(e>0){for(var t=Array(e),n=0;e--;)n+=this.height(t[e]=this.self.G.ele.children[this.self.G.ele.children.length-2]),this.self.G.ele.removeChild(t[e]);this.cache.bottom.push({ele:t,height:n}),this.lastChildPaddingBottom(this.cache.bottom.height)}}},{key:"init",value:function(){this.firstChild=document.createElement("div"),this.lastChild=document.createElement("div"),this.firstChild.style.height=this.lastChild.style.height="1px",this.self.G.ele.appendChild(this.lastChild),this.self.G.ele.insertBefore(this.firstChild,this.self.G.ele.firstChild)}},{key:"clear",value:function(){for(var e=this.self.G.ele.children.length-1;e-- >1;)this.self.G.ele.removeChild(this.self.G.ele.children[this.self.G.ele.children.length-2]);this.firstChildPaddingTop(0),this.lastChildPaddingBottom(0),this.cache.top.clear(),this.cache.bottom.clear()}}]),e}();e.exports=function(){function e(){t(this,e),this.G=Object.create(null),this.Dom=new s({self:this})}return i(e,[{key:"init",value:function(e){var t=e.ele,n=void 0===t?null:t,i=e.data,o=void 0===i?[]:i,r=e.render,l=void 0===r?function(){return document.createElement("div")}:r,s=e.startIndex,h=void 0===s?o.length:s,a=e.perPage,c=void 0===a?5:a,d=e.onTop,u=void 0===d?function(){}:d,f=e.onBottom,p=void 0===f?function(){}:f,m=e.onPullDownStart,v=void 0===m?function(){}:m,g=e.onPullDownMove,G=void 0===g?function(){}:g,y=e.onPullDownEnd,C=void 0===y?function(){}:y;this.G={ele:n,render:l,startIndex:h,perPage:c,onTop:u,onBottom:p,onPullDownStart:v,onPullDownMove:G,onPullDownEnd:C},this.Dom.init(),o.length&&this.refresh({data:o}),this.scrollListener(),this.pullDownListener()}},{key:"scrollListener",value:function(){var e=this,t=function(){var t=e;if(e.Dom.cache.top.isEmpty()){if(e.G.startIndex%e.G.perPage>0)return;e.G.onTop({cb:function(e){e&&(t.Dom.clearBottom(),t.Dom.prepend(e))},page:e.G.startIndex/e.G.perPage+1})}else e.Dom.clearBottom(),e.Dom.prependFromCache()},n=function(){var t=e;if(e.Dom.cache.bottom.isEmpty()){if(e.G.startIndex%e.G.perPage>0)return;e.G.onBottom({cb:function(e){e&&(t.Dom.clearTop(),t.Dom.append(e))},page:e.G.startIndex/e.G.perPage+1})}else e.Dom.clearTop(),e.Dom.appendFromCache()},i=function(){var i=e.G.ele.getBoundingClientRect(),o=e.Dom.firstChild.getBoundingClientRect(),r=e.Dom.lastChild.getBoundingClientRect();o.bottom>i.top&&t(),r.top<i.bottom&&n()};if("undefined"==typeof IntersectionObserver)this.G.ele.addEventListener("scroll",o(i,1e3/60));else{var r=new window.IntersectionObserver((function(i){1===i.length&&i[0].isIntersecting&&(i[0].target===e.Dom.firstChild?t():n())}),{root:this.G.ele,threshold:0});r.observe(this.Dom.firstChild),r.observe(this.Dom.lastChild)}this.G.ele.addEventListener("scroll",o((function t(n){if(!(n>2)){var o=e.Dom.firstChild.offsetHeight,r=e.Dom.lastChild.offsetTop+1;(o>1&&e.G.ele.scrollTop<o||r>1&&r>e.G.ele.offsetHeight&&e.G.ele.scrollTop+e.G.ele.offsetHeight>r)&&(i(),t((n||0)+1))}}),150,!0))}},{key:"refresh",value:function(e){var t=e.data,n=e.perPage;this.G.startIndex=0,this.Dom.clear(),n&&(this.G.perPage=n),t&&this.Dom.append(t)}},{key:"pullDownListener",value:function(){var e=this,t=function(e){return e.targetTouches?e.targetTouches[0].clientY:e.clientY},n="ontouchend"in document,i=!1,o=0,l=function(n){var r=t(n)-o;r>0&&(!1===i&&(e.G.onPullDownStart({startY:o}),i=!0),void 0===e.G.onPullDownMove({paddingTop:r})&&e.Dom.paddingTop(r))},s=function t(){var o=e;e.G.ele.removeEventListener(n?"touchmove":"mousemove",l),document.removeEventListener(n?"touchend":"mouseup",t);var s=e.Dom.paddingTop();e.G.onPullDownEnd({paddingTop:s,cb:function(e){o.refresh({data:e})}}),r((function t(){var n=Math.max(5,s/10);s>n?(e.Dom.paddingTop(s-=n),r(t)):(e.Dom.paddingTop(0),i=!1)}))};this.G.ele.addEventListener(n?"touchstart":"mousedown",(function(i){e.G.ele.scrollTop||(o=t(i),e.G.ele.addEventListener(n?"touchmove":"mousemove",l),document.addEventListener(n?"touchend":"mouseup",s))}))}}]),e}()}},t={},function n(i){if(t[i])return t[i].exports;var o=t[i]={exports:{}};return e[i](o,o.exports,n),o.exports}(687);var e,t}));