vue.js组件vue-waterfall-easy实现瀑布流效果


Posted in Javascript onAugust 22, 2017

想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易。

但是,随着时代的发展,随着时代的进步.....

算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上已经有一定的基础了,咱们废话不多说,直接进入主题。

vue-waterfall-easy

easy! easy! easy! 重要的事情说三遍!!!

所以说,咱们今天用到的不是大家熟知的vue-waterfall,而是vue-waterfall-easy;

一、获取vue-waterfall-easy组件

这里有两种方式:

第一种就是直接从git上复制vue-waterfall-easy组件的完整代码,粘贴为自己本地项目的组件(源码链接:vue-waterfall-easy),打开链接,进入src/components/vue-waterfall-easy.vue,直接复制所有代码即可。

第二种是通过npm进行全局安装,直接用命令行在你的项目目录下执行:npm install vue-waterfall-easy --save-dev

执行成功后,在node_modules目录下会出现一个vue-waterfall-easy的目录(其实就是整个demo的实例源码)

vue.js组件vue-waterfall-easy实现瀑布流效果

二、局部引用vue-waterfall-easy组件

如果是直接复制的组件源码作为本地组件,那就直接与普通组件一样引入就可以了:

import vueWaterfallEasy from '你的路径/组件名.vue'

 如果是通过npm安装的组件,那就更简单了:

import vueWaterfallEasy from 'vue-waterfall-easy'

直接这样就可以调用到node_modules目录下打包好的vue-waterfall-easy组件了;

当然,引入组件之后一定不要忘记在当前组件中注册该组件哦:

export default {
 components: {
 vueWaterfallEasy
 } 
}

三、定义需要用到的变量及方法

data () {
 return {
 imgsArr: [], //存放所有已加载图片的数组(即当前页面会加载的所有图片)
 fetchImgsArr: [] //存放每次滚动时下一批要加载的图片的数组
 }
 },
methods: {

 initImgsArr (n, m) { //初始化图片数组的方法,把要加载的图片装入


var arr = []


for (var i = n; i < m; i++) {



arr.push({ src: `static/img/${i + 1}.jpg`, link: '', info: '一些图片描述文字' }) //src为加载的图片的地址、link为超链接的链接地址、



























 //info为自定义的图片展示信息,请根据自己的情况自行填写


}


return arr

 },


 fetchImgsData () { //获取新的图片数据的方法,用于页面滚动满足条件时调用


this.imgsArr = this.imgsArr.concat(this.fetchImgsArr) //数组拼接,把下一批要加载的图片放入所有图片的数组中

 }

},

created () {


this.imgsArr = this.initImgsArr(0, 10) //初始化第一次(即页面加载完毕时)要加载的图片数据


this.fetchImgsArr = this.initImgsArr(10, 20) // 模拟每次请求的下一批新的图片的数据数据

}

四、模版中调用组件

<vue-waterfall-easy :imgsArr="imgsArr" @scrollLoadImg="fetchImgsData"></vue-waterfall-easy>

想必大家都能看懂,这里不再赘述。如果你只是需要一个滚动无限加载的瀑布流图片展示,到这一步就已经能满足需求了。当然,看过我发的源码链接里的源码的小伙伴会发现源码中的App.vue模版中是这样引用的:

<template lang="pug"> //不要忽略这个语言属性哦
#app
 h1.title vue-waterfall-easy demo
 vue-waterfall-easy(:imgsArr="imgsArr",@scrollLoadImg="fetchImgsData")
 template( scope="props")
 p.some-info 第{{props.index+1}}张图片
 p.some-info {{props.value.info}}
 </template>
</template>

有了解过的小伙伴应该能看出来这里应用的是pug(也就是大名鼎鼎的jade,后来因为商标的原因改名为pug)的语法,至于为什么这样写,可以参见vue-waterfall-easy.vue源码的第81~90行以及github上(上面我给的链接就是)文档的参数说明:

a.img-box(
 v-for="(v,i) in imgsArrC",
 :href="v.link",
 :style="{padding:gap/2+'px',width: isMobile ? '' : colWidth+'px'}"
 )
 .img-inner-box
 div.img-wraper(:style="{width:imgWidthC+'px',height:v.height?v.height+'px':''}")
 img(:src="v.src")
 .img-info
 slot(:index="i",:value="v")

注:报pug错误的小伙伴请自行百度下载pug依赖库

参数说明

vue.js组件vue-waterfall-easy实现瀑布流效果

五、运行项目

如果以上步骤没有出现问题的话,那么恭喜你,你已经可以看到自己的瀑布流了。当然,我们可以从文档中看到,我们还可以进行一些其他的配置:

组件参数

props: {
 gap: { // 图片间隔
 type: Number,
 default: 20
 },
 maxCols: { // 最大的列数
 type: Number,
 default: 5
 },
 imgsArr: { // 请求返回的图片数据,格式:[{src:'1.jpg','link':'url1' info:'自定义图片信息'},{src:'2.jpg','link':'url2',info:'自定义图片信息'}...]
 type: Array,
 required: true
 },
 imgWidth: { // 指定图片的统一宽度
 type: Number,
 default: 240
 },
 timeOut: { // 预加载事件小于500毫秒就不显示加载动画,增加用户体验
 type: Number,
 default: 500
 }
}

按照需求自行配置就可以了。

OK,到此,我们已经按照文档成功的“构建”了我们自己瀑布流组件了。当然,实际项目中我们的需求很可能不只是这样,我们还要自己做一些完善,这里我就不再多说,相信经过以上的讲解,大家已经对vue-waterfall-easy的套路有所了解,可以自己解决如何满足项目需求的问题了。如果有什么不懂或者不知道如何完善以满足需求,可以在评论中留下你的问题或者需求,我会很乐意帮助你的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 #Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 #jQuery
React学习笔记之列表渲染示例详解
Aug 22 #Javascript
bootstrap switch开关组件使用方法详解
Aug 22 #Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 #Javascript
jQuery实现广告条滚动效果
Aug 22 #jQuery
基于jQuery的表单填充实例
Aug 22 #jQuery
You might like
PHP中cookies使用指南
2007/03/16 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
零基础php编程好学吗
2019/10/11 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
python处理大数字的方法
2015/05/27 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
基于python实现学生管理系统
2018/10/17 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
python 实现汉诺塔游戏
2020/11/28 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
英国足球店:UK Soccer Shop
2017/11/19 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
工艺工程师工作职责
2013/11/23 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
企业管理标语
2014/06/10 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
小学运动会报道稿
2015/07/22 职场文书