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

Vue-Waterfall-Easy插件详细使用教程相关推荐

mc服务器领地插件配置文件,《我的世界》领地插件领地插件详细使用教程
我的世界是一款自由度非常高的游戏,玩家在游戏中不仅可以一个人自己创造一个世界,也可以在服务器中和大家一起使得这个世界变得绚丽多彩,听上去就非常的吸引人呢!但是服务器中的人十分的繁杂,许多玩家就担心自己 ...
织梦如何添html5播放器,dedecms编织梦ckplayer视频播放器插件详细安装教程
智梦ckplayer视频播放器插件的安装步骤: 第一步是下载并安装该插件. 下载地址: 单击此处在下载的压缩包中解压缩相应的编码模块文件,然后将其上传到Dream Weaving程序的数据/模块/文 ...
2Unity3D教程宝典之插件篇：Unity3D插件详细评测及教学下载
转载自风宇冲Unity3D教程学院 http://blog.sina.com.cn/s/blog_471132920101crh3.html 引言:想用Unity3D制作优秀的游戏,插件是必不可少的. ...
Unity3D教程宝典之插件篇：Unity3D插件详细评测及教学下载
原创文章如需转载请注明:转载自风宇冲Unity3D教程学院引言:想用Unity3D制作优秀的游戏,插件是必不可少的.工欲善其事必先利其器.本文主旨是告诉使用Unity3D引擎的同学们如何根据需求选择 ...
【风宇冲】Unity3D教程宝典之插件篇：Unity3D插件详细评测及教学下载
[风宇冲]Unity3D教程宝典之插件篇:Unity3D插件详细评测及教学下载 (2012-12-09 07:27:51) 转载▼ 标签: unity3d unity unity3d教程 unity3 ...
uniapp怎么解析html字符串,uniapp富文本解析插件的详细使用教程
如果你作为文章资源类或者博客类的小程序你就会发现,很多时候你的文章数据都是html格式或md格式,这样如果不经过处理,会非常难看,所以富文本解析就显得格外重要了,今天给大家写一个uniapp怎么使用富 ...
Chrome安装油猴插件详细教程
Chrome安装油猴插件详细教程一.油猴安装方法方法一:Google官方商店安装(推荐,需要科学上网) 方法二:本地安装(无需科学上网,不会科学上网的适用) 二.安装油猴插件方法一:Google ...
Mybatis分页插件PageHelper使用教程（图文详细版）
Mybatis分页插件PageHelper使用教程(图文详细版) 1.配置 2.后台代码 controller类 html页面 html页面效果图 1.配置小编的项目是springBoot项目,所以 ...
easy connect for Mac 详细安装教程
easy connect for Mac 详细安装教程 easy connect for Mac 详细安装教程 1.下载easy connect 访问https://vpn.dtwave.com/ 会 ...
vux使用方法 php,Vue+Vux项目（详细教程）
本文给大家分享一段详细的代码给大家介绍Vue+Vux项目实践思路,需要的朋友可以参考下提供完整的路由,services""""` -------------- ...

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

前言

安装

使用插件

重要细节

组件绑定参数

布局要求

imgs.json：

api接口具体内容

app.js

Express.vue

结尾

Vue-Waterfall-Easy插件详细使用教程相关推荐

最新文章

热门文章