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的值来控制返回的数据就okthis.$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瀑布流的效果了。下面给大家看看最后的样子吧，是不是比较炫酷啊，我的文章也到了尾声了，大家觉得有错误的可以指出来，我们共同学习，共同进步。谢谢大家的观看