v3-virtual-scroll/dist/v3-virtual-scroll.umd.js

基于 Vue 3 + TypeScript + Vite

(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n["v3-virtual-scroll"]={},n.Vue))})(this,function(n,e){"use strict";var V=Object.defineProperty;var D=(n,e,d)=>e in n?V(n,e,{enumerable:!0,configurable:!0,writable:!0,value:d}):n[e]=d;var i=(n,e,d)=>(D(n,typeof e!="symbol"?e+"":e,d),d);function d(r,o){let t=null;return(...s)=>{t||(t=setTimeout(()=>{r(...s),t=null},o))}}class L{constructor(o={}){i(this,"isLoading",!1);i(this,"loadCbs",[]);i(this,"doneCbs",[]);i(this,"load",()=>{this.isLoading=!0,this.doLoad()});i(this,"done",()=>{this.isLoading=!1,this.doDone()});i(this,"onLoad",o=>{this.loadCbs.push(o)});i(this,"onDone",o=>{this.doneCbs.push(o)});i(this,"doLoad",()=>{this.loadCbs.forEach(o=>{o()})});i(this,"doDone",()=>{this.doneCbs.forEach(o=>{o()})});this.init(o)}init(o){const{isLoading:t,loadCbs:s,doneCbs:a}=o;t&&(this.isLoading=t),s&&this.loadCbs.push(...s),a&&this.loadCbs.push(...a)}}var M="",C=(r,o)=>{const t=r.__vccOpts||r;for(const[s,a]of o)t[s]=a;return t};const S=e.defineComponent({props:{list:{default:()=>[]},key:{default:"id"},height:{default:window.screen.height},itemHeight:{default:0},startOffset:{default:0},endOffset:{default:0}},emits:["onTouchEnd","onTouchTop"],setup(r,{emit:o}){const t=r;let s=e.ref(0),a=e.ref(null);const h=e.computed(()=>~~(t.height/t.itemHeight)+2),f=e.computed(()=>t.list.length-1),T=e.computed(()=>~~(s.value/t.itemHeight)),k=e.computed(()=>Math.min(T.value+h.value,f.value)),E=e.computed(()=>t.startOffset||h.value),O=e.computed(()=>t.endOffset||h.value),b=e.computed(()=>{let l=T.value-E.value;return l<0?0:l}),m=e.computed(()=>{let l=k.value+O.value;return l>f.value?f.value:l}),B=e.computed(()=>t.list.slice(b.value,m.value)),H=e.computed(()=>({height:t.height+"px"})),I=e.computed(()=>({paddingTop:b.value*t.itemHeight+"px",paddingBottom:(f.value-m.value)*t.itemHeight+"px"})),p=new L,g=new L;let v=0;p.onLoad(()=>{v=t.list.length}),p.onDone(()=>{const{itemHeight:l,list:c}=t,u=(c.length-v)*l;x(u)});const _=d(l=>{s.value=l.target.scrollTop,w()},30);function x(l){const c=a.value;c.scrollTop=l}function w(){if(s.value===0&&!p.isLoading){p.load(),o("onTouchTop",p.done);return}m.value>=f.value&&!g.isLoading&&(g.load(),o("onTouchEnd",g.done))}return e.onUnmounted(()=>{document.removeEventListener("scroll",_)}),e.onActivated(()=>{e.nextTick(()=>{x(s.value)})}),(l,c)=>(e.openBlock(),e.createElementBlock("div",{class:"virtual-container",onScroll:c[0]||(c[0]=(...u)=>e.unref(_)&&e.unref(_)(...u)),style:e.normalizeStyle(e.unref(H)),ref_key:"scrollContainer",ref:a},[e.createElementVNode("div",{class:"virtual-container__wrapper",style:e.normalizeStyle(e.unref(I))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(B),u=>(e.openBlock(),e.createElementBlock("div",{key:u[r.key]},[e.renderSlot(l.$slots,"default",{item:u},void 0,!0)]))),128))],4)],36))}});var y=C(S,[["__scopeId","data-v-d5797efa"]]);n.V3VirtualScroll=y,n.default=y,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});