f-virtual-waterfall-vue-vite

Installation

npm install f-virtual-waterfall-vue-vite --save

Usage

import VirtualWaterfall from 'f-virtual-waterfall-vue-vite';
import 'f-virtual-waterfall-vue-vite/dist/style.css';

// 从后台获取数据
const getList = () => {
  // 这里是模拟数据请求，需要改成真实的从后台接口获取数据
  return new Promise((resolve) => {
    // 从后台接口获取的数据
    const demoData = [];
    resolve(demoData);
  });
};

<VirtualWaterfall
      v-if="VirtualWaterfall.name"
      :loading-box-height="100"
      :get-list="getList"
    >
      <template #itemContent="{ item }">
        <div
          class="img-box"
          :style="{ height: pxToVW(item.imgBoxHeight) }"
        >
          <span class="idx">{{ item.index }}</span>
        </div>
        <div class="text-box ellipsis-line-2">{{ item.text }}</div>
      </template>
      <template #loadingContent>
        <div class="loading-text">加载中~</div>
      </template>
</VirtualWaterfall>