免费企业_icp备案网站_武汉网站建设_青岛网站优化公司哪家好

1、地址

https://www.npmjs.com/package/vue-waterfall2

2、下载

npm install vue-waterfall2@2.x --save
这样可以下载 2.0以上版本
这里需要注意 Vue2 用1.0的版本，Vue3用2.0的版本

3、vue3.0项目中应用

3.1 mian.js

import waterfall from 'vue-waterfall2';
app.use(waterfall);

3.2 组件

<template><waterfall :col="col" :data="waterFall" @loadmore="loadMore" :gutterWidth="10"><divclass="cell-item"v-for="(item, index) in waterFall":key="index"@click="() => handleClick(index)"><img v-if="item.img" :src="item.img" alt="加载错误" /><div class="item-body">这里可以加一些图片描述</div></div></waterfall>
</template>
<style lang="scss">
.cell-item {width: 100%;// margin-bottom: 18px;background: #ffffff;border: 2px solid #f0f0f0;border-radius: 12px;overflow: hidden;box-sizing: border-box;margin-bottom: 10px;img {// border-radius: 12px 12px 0 0;width: 100%;height: auto;display: block;}
}
</style>
<script>
const waterFall = ref([]);
const waterFallList = ref([{img: "https://image.watsons.com.cn//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080",},{img: "https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080",},{img: "https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080",},{img: "https://image.watsons.com.cn//upload/02a4f38d.jpg?w=1067&h=1067&x-oss-process=image/resize,w_1080",},{img: "https://image.watsons.com.cn//upload/589585c1.jpeg?x-oss-process=image/resize,w_1080",},{img: "https://image.watsons.com.cn//upload/d862d932.jpg?w=1080&h=1440&x-oss-process=image/resize,w_1080"},{img: "https://image.watsons.com.cn//upload/eb4fb58f.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080"},{img: "https://image.watsons.com.cn//upload/71d19462.jpg?x-oss-process=image/resize,w_1080"},{img: "https://image.watsons.com.cn//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080"},{img: "https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080"},{img: "https://image.watsons.com.cn//upload/02a4f38d.jpg?w=1067&h=1067&x-oss-process=image/resize,w_1080"},{img: "https://image.watsons.com.cn//upload/589585c1.jpeg?x-oss-process=image/resize,w_1080"}
]);
const loadMore = () => {loadTip.value = '加载中……';setTimeout(() => {waterFall.value = Array.from(waterFall.value.concat(waterFallList.value));loadTip.value = '加载更多';}, 1000);
};
loadMore();// --------------滚动监听-----------------------
const scrollFun = () => {const SELECTWRAP: any = document.querySelector('.o-scroller-container')if (SELECTWRAP) {const handleScroll = function () {if (loadTip.value === '到底了……') {return;}const CONDITION = SELECTWRAP.scrollHeight - Math.ceil(SELECTWRAP.scrollTop) <= SELECTWRAP.clientHeightif (CONDITION && SELECTWRAP.scrollTop !== 0) {loadMore();}}SELECTWRAP.addEventListener('scroll', handleScroll);}
}onMounted(() => {scrollFun();
})
</script>

这里两点需要注意：
1、样式不能加 scoped
2、滚动事件需要自己加，我这个写法基本够用，加到能滚动的盒子上就行