virtual-seamless-scrolling/dist/virtual-list-scroll-vue3.umd.js

vue虚拟滚无缝动组件

(function(w,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(w=typeof globalThis<"u"?globalThis:w||self,e(w.VirtualListScrollVue3={},w.Vue))})(this,function(w,e){"use strict";function A(t){return e.getCurrentScope()?(e.onScopeDispose(t),!0):!1}function x(t){return typeof t=="function"?t():e.unref(t)}const C=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const W=t=>t!=null,D=Object.prototype.toString,$=t=>D.call(t)==="[object Object]",b=()=>{};function z(t,s){function r(...i){return new Promise((l,o)=>{Promise.resolve(t(()=>s.apply(this,i),{fn:s,thisArg:this,args:i})).then(l).catch(o)})}return r}function P(t,s={}){let r,i,l=b;const o=a=>{clearTimeout(a),l(),l=b};return a=>{const d=x(t),n=x(s.maxWait);return r&&o(r),d<=0||n!==void 0&&n<=0?(i&&(o(i),i=null),Promise.resolve(a())):new Promise((c,f)=>{l=s.rejectOnCancel?f:c,n&&!i&&(i=setTimeout(()=>{r&&o(r),i=null,c(a())},n)),r=setTimeout(()=>{i&&o(i),i=null,c(a())},d)})}}function K(t,s=200,r={}){return z(P(s,r),t)}function S(t){var s;const r=x(t);return(s=r==null?void 0:r.$el)!=null?s:r}const _=C?window:void 0,G=C?window.document:void 0;function U(...t){let s,r,i,l;if(typeof t[0]=="string"||Array.isArray(t[0])?([r,i,l]=t,s=_):[s,r,i,l]=t,!s)return b;Array.isArray(r)||(r=[r]),Array.isArray(i)||(i=[i]);const o=[],p=()=>{o.forEach(c=>c()),o.length=0},a=(c,f,y,g)=>(c.addEventListener(f,y,g),()=>c.removeEventListener(f,y,g)),d=e.watch(()=>[S(s),x(l)],([c,f])=>{if(p(),!c)return;const y=$(f)?{...f}:f;o.push(...r.flatMap(g=>i.map(v=>a(c,g,v,y))))},{immediate:!0,flush:"post"}),n=()=>{d(),p()};return A(n),n}function J(){const t=e.ref(!1),s=e.getCurrentInstance();return s&&e.onMounted(()=>{t.value=!0},s),t}function V(t){const s=J();return e.computed(()=>(s.value,!!t()))}function Q(t={}){const{document:s=G}=t;if(!s)return e.ref("visible");const r=e.ref(s.visibilityState);return U(s,"visibilitychange",()=>{r.value=s.visibilityState}),r}function X(t,s,r={}){const{window:i=_,...l}=r;let o;const p=V(()=>i&&"ResizeObserver"in i),a=()=>{o&&(o.disconnect(),o=void 0)},d=e.computed(()=>Array.isArray(t)?t.map(f=>S(f)):[S(t)]),n=e.watch(d,f=>{if(a(),p.value&&i){o=new ResizeObserver(s);for(const y of f)y&&o.observe(y,l)}},{immediate:!0,flush:"post"}),c=()=>{a(),n()};return A(c),{isSupported:p,stop:c}}function Y(t,s,r={}){const{root:i,rootMargin:l="0px",threshold:o=.1,window:p=_,immediate:a=!0}=r,d=V(()=>p&&"IntersectionObserver"in p),n=e.computed(()=>{const v=x(t);return(Array.isArray(v)?v:[v]).map(S).filter(W)});let c=b;const f=e.ref(a),y=d.value?e.watch(()=>[n.value,S(i),f.value],([v,E])=>{if(c(),!f.value||!v.length)return;const L=new IntersectionObserver(s,{root:S(E),rootMargin:l,threshold:o});v.forEach(T=>T&&L.observe(T)),c=()=>{L.disconnect(),c=b}},{immediate:a,flush:"post"}):b,g=()=>{c(),y(),f.value=!1};return A(g),{isSupported:d,isActive:f,pause(){c(),f.value=!1},resume(){f.value=!0},stop:g}}function Z(t,s={}){const{window:r=_,scrollTarget:i,threshold:l=0}=s,o=e.ref(!1);return Y(t,p=>{let a=o.value,d=0;for(const n of p)n.time>=d&&(d=n.time,a=n.isIntersecting);o.value=a},{root:i,window:r,threshold:l}),o}const ee=e.defineComponent({__name:"index",props:{dataKey:{type:String,required:!0,default:"id"},loading:{type:Boolean,required:!0},dataSource:{type:Array,required:!0},interval:{type:Number,required:!1,default:0},refresh:{type:Boolean,default:!1}},emits:["scroll-end","line-scroll-end"],setup(t,{emit:s}){const r=t,i=s,l=e.ref([]),o=e.ref(),p=e.ref(),a=e.ref(),d=e.ref([]),n=e.reactive({viewHeight:0,itemHeight:0,startIndex:0,maxCount:1,preLen:0,rafTimer:null,isHover:!1});let c;function f(u){var k;cancelAnimationFrame(n.rafTimer||0);function h(){n.rafTimer=requestAnimationFrame(u)}const m=((k=o.value)==null?void 0:k.scrollTop)||0;if(r.interval>0&&m>0&&m%n.itemHeight===0){i("line-scroll-end"),clearTimeout(c),c=setTimeout(()=>{n.rafTimer=requestAnimationFrame(h)},r.interval);return}n.rafTimer=requestAnimationFrame(h)}const y=e.computed(()=>Math.min(l.value.length,n.startIndex+n.maxCount)),g=e.computed(()=>l.value.slice(n.startIndex,y.value)),v=e.computed(()=>l.value.length<n.maxCount-1?[]:l.value.slice(0,n.maxCount)),E=e.computed(()=>({height:`${n.itemHeight*g.value.length}px`,transform:`translate3d(0, ${n.itemHeight*n.startIndex}px, 0)`})),L=e.computed(()=>({transform:`translate3d(0, ${n.itemHeight*n.startIndex}px, 0)`})),T=()=>{if(!n.isHover){if(r.loading){H();return}if(o.value){let u=o.value.scrollTop;d.value.length&&u>=d.value[d.value.length-1].bottom?(u=0,r.loading||i("scroll-end")):u+=1,o.value.scrollTop=u}f(T)}},H=()=>{n.rafTimer!==null&&window.cancelAnimationFrame(n.rafTimer)},M=()=>{n.isHover=!0,H()},O=()=>{n.isHover=!1,T()},ne=()=>{H()};function re(u){let h=!1;return function(...m){h||(h=!0,window.requestAnimationFrame(()=>{u.apply(this,m),h=!1}))}}const F=re(()=>{if(!o.value)return;let{scrollTop:u}=o.value;n.startIndex=Math.floor(u/n.itemHeight),g.value.length===0&&(o.value.scrollTop=0,r.loading||i("scroll-end"))}),ie=()=>{n.viewHeight=o.value?o.value.offsetHeight:0},oe=()=>{r.refresh&&(n.preLen=0,l.value=[]);const u=r.dataSource.length-n.preLen;for(let h=0;h<u;h++){const m=h+n.preLen;l.value.push(r.dataSource[m])}n.preLen=l.value.length},q=K(()=>{n.viewHeight=o.value?o.value.offsetHeight:0,e.nextTick(()=>{if(a.value&&a.value[0]){const u=Math.ceil(n.viewHeight/a.value[0].offsetHeight)+1;if(isNaN(u))return;n.maxCount=Math.ceil(n.viewHeight/a.value[0].offsetHeight)+1,n.itemHeight=a.value[0].offsetHeight}})},300),se=()=>{o.value&&X(o,()=>{q()})};e.onMounted(()=>{se(),ie()}),e.watch(()=>r.dataSource.length,()=>{oe(),q()},{immediate:!0}),e.watch(()=>r.loading,u=>{u||T()},{immediate:!0});const j=e.ref(),le=Z(j);let N=!1;e.watch(le,u=>{if(!N){N=!0;return}u?O():M()});const ae=Q();return e.watch(ae,u=>{u==="hidden"?M():O()}),e.onBeforeUnmount(H),(u,h)=>(e.openBlock(),e.createElementBlock("div",{class:"fs-estimated-virtuallist-container",ref_key:"containerRef",ref:j},[e.createElementVNode("div",{class:"fs-estimated-virtuallist-content",ref_key:"contentRef",ref:o,onMouseleave:O,onMouseenter:M,onMouseover:ne,onScroll:h[0]||(h[0]=(...m)=>e.unref(F)&&e.unref(F)(...m))},[e.createElementVNode("div",{class:"fs-estimated-virtuallist-list",ref_key:"listRef",ref:p,style:e.normalizeStyle(E.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value,(m,k)=>(e.openBlock(),e.createElementBlock("div",{class:"fs-estimated-virtuallist-list-item",ref_for:!0,ref_key:"itemRef",ref:a,key:m[t.dataKey]||k},[e.renderSlot(u.$slots,"item",{item:m},void 0,!0)]))),128))],4),e.createElementVNode("div",{class:"fs-estimated-virtuallist-list",style:e.normalizeStyle(L.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,(m,k)=>(e.openBlock(),e.createElementBlock("div",{class:"fs-estimated-virtuallist-list-item",key:m[t.dataKey]||k},[e.renderSlot(u.$slots,"item",{item:m},void 0,!0)]))),128))],4)],544)],512))}}),R=(t,s)=>{const r=t.__vccOpts||t;for(const[i,l]of s)r[i]=l;return r},B=R(ee,[["__scopeId","data-v-de36a4ed"]]),te={class:"list-header"},I=R(e.defineComponent({__name:"index",props:{titleList:{type:Array,required:!0}},setup(t){return(s,r)=>(e.openBlock(),e.createElementBlock("div",te,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.titleList,i=>(e.openBlock(),e.createElementBlock("div",{class:"list-header-title",key:i.label,style:e.normalizeStyle({width:i.width})},e.toDisplayString(i.label),5))),128))]))}}),[["__scopeId","data-v-7f80261f"]]);B.install=function(t){t.component("VirtualListScroll",B)},I.install=function(t){t.component("ListHeader",I)},w.ListHeader=I,w.VirtualListScroll=B,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});