waterFall3 瀑布流组件

介绍

基于vue3+typesscript+rollup构建的瀑布流列表组件，在pc端能够根据屏幕宽度做自适应变化调整。

效果查看地址

http://waterfall3.top/

安装

npm i water-fall3 --save-dev 
或
yarn install water-fall3 --save-dev

引入

全局注册组件

import { createApp } from 'vue';
import waterFall3 from 'water-fall3';

const app = createApp();
app.use(waterFall3);

局部注册组件

<script setup lang="ts">
import  waterFall3  from "../../src/";
</script>
<template>
<water-fall3></water-fall3> 
</template>

代码演示

基础用法

  <water-fall3
    ref="waterfall"
    :lists="lists"
    @onBottom="getLists"
    @click="clickFn"
    @imgError="imgErrorFn"
  >
  </water-fall3>

<script setup lang="ts">
import  waterFall3  from "../../src/";
import axios from "axios";
import { ref, onMounted } from "vue";
let lists = ref([]);
let waterfall = ref<HTMLElement | null>();
let page =ref<number>(0)
const getLists = () => {
  axios
    .get("./src/mock/list.json" )
    .then((res) => {
      // 加载到底部数据了
      if (page.value.length>10) {
       waterfall.value.onFinish();
        waterfall;
        return;
      }
      lists.value = lists.value.concat(res.data);
      page.value++
    });
};

getLists();
const clickFn = ({ item,index,  isTapImg }) => {
  console.log(item,index,  isTapImg)
};

const imgErrorFn = (imgItem) => {
  console.log("图片加载错误", imgItem);
};
</script>

API

CouponList Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | width | 容器宽度 | number | - | | height | 容器高度 | number | - | | lists | 列表数据 | array | [] | | itemWidth | 每一项列表的宽度 | number | 240 | | bottomOffset | 滚动条与底部距离小于 bottomOffset 时触发新的加载 | number | 50 | | maxCols | 在当前容器宽度内最多可以容纳多少列 | number | 5 | | horizontalGap | 水平列表项之间的间距 | number | 10 | | verticalGap | 纵向列表项之间的间距 | number | 10 | | srcKey | 列表项显示图片的key字段 | string | src | | offsetBottom | 列表项显示图片的key字段 | string | src | | srcKey | 列表项显示图片的key字段 | string | src | | finishGap | 列表和滚动到底部文字距离 | number | 20 |

Events

| 事件名 | 说明 | 回调参数 | | -------- | -------------- | ----------------------- | | onBottom | 与底部距离小于 bottomOffset 时触发该事件 | - | | click | 点击列表项触发 | item:列表数据;index:列表项:isTapImg:点击的是图片还是整个列表项; |

Slots

| 名称 | 说明 | | ------------------------------ | -------------------- | | loading | 加载数据动画 | | head | 列表头部项内容 | | default | 列表项默认描述内容 | | finish | 列表项底部描述尼尔 |