vuux/dist/es/VirtualList/src/hook/useVirtualList.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { ref as c, computed as r, watch as S, nextTick as v, onMounted as b } from "vue";
const H = (e, t) => {
  const l = e.itemSize, a = e.overscan, s = c(e.height), i = c(0), o = c(0), h = c(e.list.length * l), g = r(() => typeof e.height == "number" ? `${e.height}px` : e.height || "100%"), m = r(() => {
    const u = Math.ceil(s.value / l), M = Math.min(o.value + u + a, e.list.length);
    return e.list.slice(o.value, M);
  }), n = () => {
    t.value && (i.value = t.value.scrollTop, o.value = Math.max(Math.floor(i.value / l) - a, 0));
  }, T = () => n(), d = () => {
    t.value && (t.value.scrollTop = 0, n());
  }, x = () => {
    t.value && (t.value.scrollTop = e.list.length * l - s.value, n());
  }, I = (u) => {
    t.value && (t.value.scrollTop = u * l, n());
  };
  return S(
    () => e.list,
    () => {
      h.value = e.list.length * l, v(n);
    },
    { deep: !0 }
  ), b(() => {
    h.value = e.list.length * l, v(n);
  }), {
    itemHeight: l,
    startIndex: o,
    totalHeight: h,
    heightStyle: g,
    visibleItems: m,
    onScroll: T,
    scrollToTop: d,
    scrollToBottom: x,
    scrollToIndex: I
  };
};
export {
  H as useVirtualList
};