@hm-waterfall/vue3

文档

• JS/TS
• React
• Vue
• Vue3

效果

支持响应式虚拟列表

在 vue3 中使用

npm i @hm-waterfall/vue3

<script setup lang="ts">
import Watefall from "@hm-waterfall/vue3";
import { onMounted, ref } from "vue";
const columnNum = ref<number>(2);
const getData = (page: number, pageSize: number) => {
  return new Promise((resolve) => {
    fetch(`http://localhost:5000/getwaterfall?page=${page}&pageSize=${pageSize}`)
      .then((response) => response.json())
      .then((data) => resolve(data.data));
  });
};
</script>

<Waterfall :request="getData" :column-num="columnNum" />

增加卡片自定义底部信息

添加默认插槽

<Waterfall :request="getData" :column-num="columnNum">
  <template #default="{ item }">
    <div class="text-info">
      <div class="text">{{ item.title }}</div>
      <div class="info">
        <img :src="item.avatar" class="avatar" />
        <span>{{ item.author }}</span>
      </div>
    </div>
  </template>
</Waterfall>

卡片点击事件 onCardClick

点击卡片事件函数,接收一个当前卡片信息 item 参数

<Waterfall :request="getData" :column-num="columnNum" @on-card-click="onCardClick" />

const onCardClick = (item: IRenderItem) => {
  alert(`你点击了----${item.title}`);
};

API

属性名	值类型	描述	是否必填	默认值
gap	number	间隔	否	16
columnNum	number	列数	否	2
pageSize	number	每页数量	否	50
showLoading	boolean	是否显示加载图标	否	true
request	(page: number, pageSize: number) => Promise	获取列表的异步函数,返回的数据中每个卡片数据必须包含width和height两个属性,卡片图片字段为url	是	/

插槽

插槽名	描述
default	卡片底部描述信息
loadingSlot	加载更多
backTopSlot	回到顶部按钮

事件

事件名	类型
onCardClick	(item: IRenderItem) => void