vue中使用（瀑布流）vue-waterfall-easy插件

最新推荐文章于 2024-12-27 11:29:31 发布

吃葡萄不吐葡萄皮嘻嘻

最新推荐文章于 2024-12-27 11:29:31 发布

阅读量2.8k

点赞数 3

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/qq_45695853/article/details/124796645

vue 专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了如何在Vue应用中使用vue-waterfall-easy插件实现瀑布流布局，包括安装步骤、组件引入和配置，以及如何处理数据和样式调整。特别关注了父元素高度设定和默认滚动条的消除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

📢参考文档

效果图如下：

在这里插入图片描述

✨1.安装

npm install vue-waterfall-easy --save-dev

✨2.引入

	import vueWaterfallEasy from 'vue-waterfall-easy'
	
	export default {
	  name: 'app',
	  components: {
	    vueWaterfallEasy
	  }
	}

✨3.使用

	<vue-waterfall-easy
	      :imgsArr="imgsArr"
	      srcKey="img"
	      @scrollReachBottom="getData"
	      @click="clickFn"
	      :maxCols="4"
	    >
      <div class="img-info" slot-scope="props">
        <p class="some-info">{{ props.value.num }}张图片</p>
        <p class="some-info">{{ props.value.title }}</p>
      </div>
    </vue-waterfall-easy>

✨具体代码如下：

<template>
  <div class="waterfall">
    <vue-waterfall-easy
      :imgsArr="imgsArr"
      srcKey="img"
      @scrollReachBottom="getData"
      @click="clickFn"
      :maxCols="4"
    >
      <div class="img-info" slot-scope="props">
        <p class="some-info">{{ props.value.num }}张图片</p>
        <p class="some-info">{{ props.value.title }}</p>
      </div>
    </vue-waterfall-easy>
  </div>
</template>

<script>
import Mock from "mockjs";
import vueWaterfallEasy from "vue-waterfall-easy";
export default {
  components: {
    vueWaterfallEasy,
  },
  data() {
    return {
      imgsArr: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    clickFn(event, { index, value }) {
      // 阻止a标签跳转
      event.preventDefault();
      // 只有当点击到图片时才进行操作
      if (event.target.tagName.toLowerCase() == "img") {
        console.log("img clicked", index, value);
      }
    },
    getData() {
      //真实项目中根据真实的请求数据来进行追加（此处只是模拟）
      this.imgsArr.push(...this.imgsArr);
    },
    getList() {
      this.imgsArr = Mock.mock({
        "list|20": [
          {
            "id |+1": 1,
            img: "@image",
            "num|+1": 5,
            "title|": "@cname",
          },
        ],
      }).list;
      console.log(this.imgsArr);
    },
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  height: 100%;
  width: 100%;
  .waterfall {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    .img-info {
      display: flex;
      justify-content: space-around;
      height: 45px;
      line-height: 45px;
    }
  }
}
</style>