water-fall3
v0.0.3
Published
基于vue3开发的瀑布流组件,解决前台流式布局问题,图片加载采用的是预加载方式。
Downloads
2
Maintainers
Readme
waterFall3 瀑布流组件
介绍
基于vue3+typesscript+rollup构建的瀑布流列表组件,在pc端能够根据屏幕宽度做自适应变化调整。
效果查看地址
安装
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 | 列表项底部描述尼尔 |