菜单

vue.js完结瀑布流之vue-waterfall-easy

2019年6月8日 - JavaScript

假若是平昔复制的零件源码作为本土组件,这就平素与常常组件相同引进就足以了:

3、定义须要使用的变量及措施

零件参数

*                                                     //info为自定义的图样凸显音讯,请依照本人的情景自行填写
    }
    return arr
   },*

算了算了,扯远了,既然能找到那儿来,显著是在vue.js晚春经有必然的底蕴了,我们废话十分少说,间接进入正题。

  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")

参数表达

只怕我们应该多多都曾经习感觉常了jquery的DOM操作,jquery的瀑布流完结起来也很轻易。

OK,到此,大家早已根据文书档案成功的“创设”了我们友好瀑布流组件了。当然,实际项目中我们的须要很恐怕不只是那样,我们还要本人做一些健全,这里本身就不再多说,相信通过上述的教学,我们早就对vue-waterfall-easy的老路有所掌握,能够和睦治决什么满意项目须求的难题了。假若有何不懂或许不通晓怎么周全以满足供给,能够在评价中留下您的难点要么供给,笔者会很愿意帮助你的。

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

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

那边有几种格局:

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
 }
}

率先种正是直接从git上复制vue-waterfall-easy组件的1体化代码,粘贴为协和本地品种的零部件(源码链接:vue-waterfall-easy),打开链接,进入src/components/vue-waterfall-easy.vue,直接复制全数代码就可以。

若是上述步骤没有出现难题的话,那么恭喜你,你已经足以看到本身的瀑布流了。当然,我们能够从文书档案中观望,大家仍是可以拓展局地任何的布局:

 倘诺是透过npm安装的组件,那就更简便易行了:

5、运转品种

vue-waterfall-easy

三、定义供给运用的变量及办法

import vueWaterfallEasy from 'vue-waterfall-easy'

图片 1

只是,随着时期的向上,随着时代的升高…..

 若是是经过npm安装的零件,那就更简明了:

直白那样就能够调用到node_modules目录下打包好的vue-waterfall-easy组件了;

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")
export default {
  components: {
    vueWaterfallEasy
  }      
}

第二种正是直接从git上复制vue-waterfall-easy组件的完全代码,粘贴为投机本地品种的零部件(源码链接:vue-waterfall-easy),打开链接,进入src/components/vue-waterfall-easy.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>

于是说,大家明日用到的不是豪门熟练的vue-waterfall,而是vue-waterfall-easy;

data () {
    return {
      imgsArr: [],         //存放所有已加载图片的数组(即当前页面会加载的所有图片)
      fetchImgsArr: []     //存放每次滚动时下一批要加载的图片的数组
    }
  },
  methods: {
import vueWaterfallEasy from '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
  }
}

遵循供给自动布置就能够了。

说起底效果图:

图片 2

 


 

OK,到此,大家已经遵照文书档案成功的“构建”了大家同舟共济瀑布流组件了。当然,实际项目中大家的须要很或然不只是那般,我们还要自身做一些完美,这里本人就不再多说,相信经过上述的上课,我们早就对vue-waterfall-easy的套路有所明白,能够团结消除哪些满足项目须求的主题素材了。如若有怎么着不懂可能不知底什么样完善以满意急需,能够在说长话短中留给你的主题材料可能要求,作者会很乐于支持您的。

 

 

转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7407055.html 

 

四、模版中调用组件

参数表明

参数 描述
props.index 图片在数组中的索引,从0开始
props.value 遍历参数imgsArr的元素值

5、运行品种

一旦以上步骤未有出现问题来讲,那么恭喜您,你早已得以看到本人的瀑布流了。当然,我们得以从文书档案中看看,大家还足以举行部分别的的布置:

注:报pug错误的伴儿请自行百度下载pug正视库

莫不我们都能看懂,这里不再赘述。假使您只是内需3个滚动Infiniti加载的瀑布流图片展现,到这一步就早已能满足急需了。当然,看过自身发的源码链接里的源码的小兄弟伴会开采源码中的App.vue模版中是这么引用的:

莫不大家都能看懂,这里不再赘述。假如您只是供给二个滚动Infiniti加载的瀑布流图片呈现,到这一步就已经能满意需求了。当然,看过自家发的源码链接里的源码的青少年伴会开采源码中的App.vue模版中是那般引用的:

转发请注解出处:http://www.cnblogs.com/meng1314-shuai/p/7407055.html !!!!!

图片 3

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

vue-waterfall-easy

一、获取vue-waterfall-easy组件

<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>

 

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

因而说,我们今日用到的不是大家熟练的vue-waterfall,而是vue-waterfall-easy;

唯恐大家应该多多都已经习于旧贯了jquery的DOM操作,jquery的瀑布流实现起来也很轻易。

   fetchImgsData () {  
 //获取新的图样数据的法子,用于页面滚动满意条件时调用
    this.imgsArr = this.imgsArr.concat(this.fetchImgsArr)  
//数组拼接,把下一堆要加载的图样放入全部图片的数组中
   }
  },
  created () {
    this.imgsArr = this.initImgsArr(0, 10)      
//起始化第贰遍(即页面加载完结时)要加载的图片数据
    this.fetchImgsArr = this.initImgsArr(拾, 20) //
模拟每一遍请求的下一群新的图片的数量数据
  }

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

万一是一贯复制的机件源码作为当地组件,那就径直与普通组件一样引进就足以了:

有询问过的朋侪应该能看出来这里运用的是pug(也正是资深的jade,后来因为商标的因由改名称为pug)的语法,至于怎么这么写,可以恋慕vue-waterfall-easy.vue源码的第八一~90行以及github上(上边作者给的链接就是)文档的参数表明:

本来,引进组件之后自然不要遗忘在现阶段组件中登记该器件哦:

此地有两种艺术:

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

export default {
 components: {
 vueWaterfallEasy
 } 
}

注:报pug错误的同伙请自行百度下载pug注重库

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>

其次种是经过npm进行全局安装,直接用命令行在你的花色目录下实践:npm
install vue-waterfall-easy –save-dev

4、模版中调用组件

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

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

一、获取vue-waterfall-easy组件

其次种是由此npm实行全局安装,直接用命令行在你的类型目录下实行:npm install vue-waterfall-easy --save-dev

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

图片 4

可是,随着一代的前行,随着一代的提升…..

算了算了,扯远了,既然能找到那儿来,料定是在vue.js上曾经有自然的根底了,我们废话十分少说,直接进去正题。

easy! easy! easy! 主要的政工说贰次!!!

有询问过的同伙应该能看出来这里运用的是pug(约等于无人不知的jade,后来因为商标的因由改名称叫pug)的语法,至于怎么如此写,可以敬重vue-waterfall-easy.vue源码的第十一~90行以及github上(上边笔者给的链接就是)文档的参数表明:

自然,引进组件之后自然毫无忘记在此时此刻组件中注册该零件哦:

*   initImgsArr (n, m) {  
//早先化图片数组的章程,把要加载的图纸装入
    var arr = []
    for (var i = n; i < m; i++) {
      arr.push({ src: `static/img/${i + 1}.jpg`, link: ”, info:
‘一些图片描述文字’ }) //src为加载的图纸的地点、link为超链接的链接地址、*

你或然感兴趣的稿子:

上述正是本文的全体内容,希望对我们的求学抱有援助,也可望大家多多扶助脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图