Vue项目中 vue-waterfall-easy 瀑布流框架使用

最新推荐文章于 2024-08-09 08:02:58 发布

原创最新推荐文章于 2024-08-09 08:02:58 发布 · 6.9k 阅读

11 ·

CC 4.0 BY-SA版权

Vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

plug

1 篇文章

订阅专栏

本文档详细介绍了在Vue项目中如何使用vue-waterfall-easy框架，从安装、组件引入、HTML布局到使用vue-resource获取并展示后端数据。特别强调了页面布局显示的重要性，尤其是`#content`块的样式设置，以避免内容不可见的问题。然而，存在一个遗留问题：在PC端浏览器全屏模式下，瀑布流部分可能会被遮挡，这可能是由于插件计算样式时依据document而非父元素导致。

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

1、Installation（安装）

进入到项目当前文件夹，执行命令：

npm install vue-waterfall-easy --save

2、引入vue-waterfall-easy

2.1、main.js中引入

import vueWaterfallEasy from 'vue-waterfall-easy'

2.2、当前vue文件包含组件

export default {
  name: 'app',
  components: {
    vueWaterfallEasy
  }
    //省略其他代码
}

3、HTML中引入组件

<div id="content">
    <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"></vue-waterfall-easy>
</div>

3.1、页面布局显示（*重点，有可能页面不可见）

#content块必须设置为

 #content{
  position: absolute;    /*必须*/
  top:32px;              /*top必须，大小可控制*/
  bottom:0;              /*bottom必须，一直延申到当前块底部*/
  width:100%;
}

4、vue-resource获取后端数据并显示在页面

export default {
  name: 'morePicture',
  components: {
    vueWaterfallEasy
  },
  data() {
    return {
      imgsArr: [],
      group: 0, // 当前加载的加载图片的次数
    }
  },
  methods: {
    getData() {
  this.$http.post('http://119.23.71.203:8080/edu/image/eduschoolimageinfo/queryPageList', { 'companyKey': "1" }).then(res => {
        this.group++;
        if (this.group === 10) {
          // 模拟已经无新数据，显示 slot="waterfall-over"
          this.$refs.waterfall.waterfallOver()
          return
        }
        var dataList = res.data.data.dataList;
        console.log(dataList);
        console.log(Array.isArray(dataList));
        for (let v of dataList) {
          var picObj = {
            "src": "./..",
            "href": "",
            "info": ""
          }
          picObj["src"] += v.imageUrl;
          picObj["href"] = v.imageKey;
          picObj["info"] = v.imageName;
          this.imgsArr = this.imgsArr.concat(picObj);
        }
      }).catch((res) => {
        console.log(res);
      });
    }
  },
  created() {
    this.getData();
    // 删除某个卡片
    // setTimeout(()=>{
    //   this.imgsArr.splice(1,1)
    // },2000)
  },
  mounted() {}
}