vue3.0 + vue-waterfall2：瀑布流布局

天外天-亮

于 2025-02-28 15:30:45 发布

阅读量312

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_44384273/article/details/145929823

版权

Vue 专栏收录该内容

27 篇文章

订阅专栏

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">
	  <div
	    class="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.clientHeight
      if (CONDITION && SELECTWRAP.scrollTop !== 0) {
        loadMore();
      }
    }
    SELECTWRAP.addEventListener('scroll', handleScroll);
  }
}

onMounted(() => {
  scrollFun();
})
</script>

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