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 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
浅谈JavaScript字符集
May 22 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
js实现双人五子棋小游戏
May 28 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 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 时间计算问题小结
2009/01/04 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
php计算税后工资的方法
2015/07/28 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
jQuery JSON的解析方式分享
2011/04/05 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Python实现Linux监控的方法
2019/05/16 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
公司薪酬管理制度
2014/01/31 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
走群众路线剖析材料
2014/10/09 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
Promise静态四兄弟实现示例详解
2022/07/07 Javascript