water-fall3 v0.0.3

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

Events

Slots