mine-h5-ui/es/MeVirtualList/hooks.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { ref as c, computed as r, watch as E, nextTick as S } from "vue";
import { Throttle as P } from "../MeAPI/function.js";
/*!
          * mine-h5-ui v2.16.0
          * Copyright (c) 2025 biaov
          * @license MIT
          */
const j = (e, I) => {
  const m = c(0), h = c(0), l = c([]), a = c(0), v = c(0), g = [], T = r(() => e.remain * e.screen[0]), C = r(() => e.remain * e.screen[1]), o = r(() => Math.min(a.value, T.value)), B = r(() => Math.min(e.list.length - v.value, C.value)), D = r(() => l.value.slice(a.value - o.value, v.value + B.value)), x = () => {
    S(() => {
      e.itemHeight === 0 && g.forEach((t) => {
        const { height: n } = t.getBoundingClientRect(), i = +t.dataset.index, u = l.value[i].height;
        n && u !== n && (l.value[i].height = n);
      }), m.value = l.value.reduce((t, n) => t + n.height, 0);
    });
  };
  let s = (t) => {
    const { scrollTop: n, clientHeight: i, scrollHeight: u } = t.target;
    if (e.itemHeight)
      a.value = ~~(n / e.itemHeight), v.value = a.value + e.remain, h.value = (a.value - o.value) * e.itemHeight;
    else {
      let f = 0;
      const R = l.value.findIndex((d) => (f += d.height, f > n));
      a.value = R, v.value = a.value + e.remain;
      let H = 0;
      const k = a.value - o.value;
      l.value.find((d, w) => w >= k ? !0 : (H += d.height, !1)), h.value = H, x();
    }
    S(() => {
      n + i >= u - e.distance && I("load-more");
    });
  };
  s = P(s, e.interval);
  const M = (t) => {
    t && (g[+t.dataset.index] = t);
  };
  return E(
    () => e.list,
    (t) => {
      const n = e.itemHeight || 100;
      l.value = t.map((i, u) => ({ ...i, virtualId: u, height: n })), x();
    },
    { deep: !0, immediate: !0 }
  ), { scrollBarHeight: m, scrollTranslateY: h, renderData: D, onScroll: s, setItemRef: M };
};
export {
  j as useHandler
};