Vue-Waterfall-Easy插件详细使用教程

前言

自己在做信息管理系统后台所遇到的一些问题，困扰了我好几天，于是将这个用法记录下来，希望能够大家在学习vue的道路上一路长虹。我想要展示一些照片，展示大学课余生活以及一起参加活动的一些片段。当然，我们百度搜照片他们就是一些瀑布流的布局。首先瀑布流分为等高瀑布流、等宽瀑布流等。而且我们还发现百度搜出来的照片下滑就可以看到更多的照片，这就用到了懒加载，加载更多的照片，来展示。我现在用的是vue来写管理系统后台，自然，我们需要用到Vue-Waterfall-Easy插件，它的优点就在于我们不用去再封装懒加载的部分内容，我们只需要拿到数据，发送axios请求对应的数据就可以了。

安装

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

使用插件

<template>
  <div id="content">
  	 <!-- 使用组件 -->
    <vue-waterfall-easy></vue-waterfall-easy>
  </div>
</template>
<script>
// 第一步：导入组件
import vueWaterfallEasy from "vue-waterfall-easy";
export default {
  name:'express',
  // 注册局部组件
  components:{
    vueWaterfallEasy
  }
 }
</script>

重要细节

组件绑定参数

• imgsArr : 要求内容是一个数组，数组中的元素为一个个对象，对象最起码包含两个键值src、href src代表要展示图片的地址，href代表点击图片将会跳转的路径
• getData(函数)：为scrollReachBottom提供的事件，简单来说就是下拉时加载更多照片，然后对此就行数据的拼接。当然文档中也有说明，有一个是替量更新，有一个是增量更新。当然，官方文档中说我们在开发过程中更多的就是使用增量更新，比较省资源。

布局要求

父级需要设置一些样式，才能显示瀑布流，要不然可能什么都不会显示。当然，你所遇到的可能和我的不太一样，你可以改css样式来达到自己写的网页效果。具体看自己如何写

#content{
  position: absolute;
  top: 80px;
  bottom: 0;
  left: 250px;
  width: 80%;
}

说完了这些，想必觉得都很简单吧，接下来我们看下面的内容，自己边写接口边写网页就觉得还挺难的。我的接口使用nodejs+express+json开发的。我也是一个刚入前端的小白，接口写的马马虎虎。数据全靠json去模拟，没有用数据库。

imgs.json：

很重要，刚开始我一直想着怎么通过api接口返回这些图片，后来一想通过这个可以解决我想要的，然后我就把这些图片放在了本地服务器上面，也就是phpstudy上面，然后这样来完成对图片的请求。当然这个问题困扰了我好久，比较深刻。也算是自己比较愚钝吧。大佬们轻喷

[
  {
    "src": "http://localhost/img/1.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/2.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/3.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/4.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/5.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/6.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/7.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/8.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/9.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/10.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/11.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/12.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/13.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/14.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/15.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/16.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/17.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/18.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/19.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  },
  {
    "src": "http://localhost/img/20.jpg",
    "href": " /test",
    "info": "一些图片描述文字"
  }
]

api接口具体内容

// express 框架
const express = require('express')
// 定义路由
const router = express.Router()
// imgs数据
const score_info = require('../data/imgs.json')
const success_data = {
  data:score_info,
  meta:{
    status:200,
    msg:"请求成功"
  }
}

router.get('/imgs',(req,res)=>{
  res.send(success_data.data)
})
// 导出路由
module.exports = router

app.js

const express = require('express')
// 对post参数进行解析
const bodyParser = require('body-parser')
const app = express()
// 解决跨域问题
const cors = require('cors');
// 导入路由
const imgs = require('./router/imgs')
// 使用路由
app.use('/api',imgs)
const hostname = 'localhost';
const port = 8888
app.listen(port,()=>{
  console.log('Server running at http://'+hostname+':'+port+'/')
})

Express.vue

<template>
  <div id="content">
    <!-- 使用组件 -->
    <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData">
    </vue-waterfall-easy>
  </div>
</template>

<script>
import vueWaterfallEasy from "vue-waterfall-easy";

export default {
  name:'express',
  data(){
    return {
      imgsArr:[]
    }
  },
  components:{
    vueWaterfallEasy
  },
  created(){
    this.getData()
  },
  methods:{
    getData(){
// 上面定义的api接口，直接发起get请求api/imgs，访问成功则会返回我们想要的数据。然后通过增量更新数据。就完成了瀑布流。
// 当然，官方文档说的也比较清楚，一般懒加载就是通过group的数来进行请求更新，我这里并没有用这个。我感觉明白到这个地方就足够了。剩下的就	
//是通过group的值来控制返回的数据就ok
      this.$http.get('api/imgs').then(res=>{
        console.log(res.data);
          this.imgsArr = this.imgsArr.concat(res.data)
      })
    }
  }
}
</script>

<style>
#content{
  position: absolute;
  top: 80px;
  bottom: 0;
  left: 250px;
  width: 80%;
}
</style>

结尾

到这里我们就可以看到vue瀑布流的效果了。下面给大家看看最后的样子吧，是不是比较炫酷啊，我的文章也到了尾声了，大家觉得有错误的可以指出来，我们共同学习，共同进步。谢谢大家的观看