mine-h5-ui/es/MeVirtualList/index.vue.js

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

import { defineComponent as x, openBlock as l, createElementBlock as r, unref as e, normalizeStyle as a, createElementVNode as d, Fragment as y, renderList as $, renderSlot as u } from "vue";
import { useHandler as S } from "./hooks.js";
const k = ["data-index"], I = /* @__PURE__ */ x({
  name: "MeVirtualList",
  __name: "index",
  props: {
    list: { default: () => [] },
    interval: { default: 100 },
    height: { default: "100%" },
    itemHeight: { default: 0 },
    distance: { default: 50 },
    screen: { default: () => [1, 1] },
    remain: { default: 8 }
  },
  emits: ["load-more"],
  setup(s, { emit: m }) {
    const f = m, c = s, { scrollBarHeight: h, scrollTranslateY: p, renderData: g, onScroll: n, setItemRef: v } = S(c, f);
    return (o, i) => (l(), r("div", {
      class: "me-virtual-list",
      style: a(`height:${s.height};`),
      onScrollPassive: i[0] || (i[0] = //@ts-ignore
      (...t) => e(n) && e(n)(...t))
    }, [
      d("div", {
        class: "scroll-bar",
        style: a(`height:${e(h)}px;`)
      }, null, 4),
      d("ul", {
        class: "list-scroll",
        style: a(`transform:translateY(${e(p)}px);`)
      }, [
        (l(!0), r(y, null, $(e(g), (t) => (l(), r("li", {
          key: t.virtualId,
          ref_for: !0,
          ref: e(v),
          "data-index": t.virtualId
        }, [
          u(o.$slots, "default", { item: t })
        ], 8, k))), 128))
      ], 4),
      u(o.$slots, "more")
    ], 36));
  }
});
export {
  I as default
};