vue.js組件vue-waterfall-easy如何實(shí)現(xiàn)瀑布流效果

這篇文章主要介紹vue.js組件vue-waterfall-easy如何實(shí)現(xiàn)瀑布流效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

vue-waterfall-easy

easy! easy! easy! 重要的事情說(shuō)三遍?。?！

所以說(shuō)，咱們今天用到的不是大家熟知的vue-waterfall，而是vue-waterfall-easy；

一、獲取vue-waterfall-easy組件

這里有兩種方式：

第一種就是直接從git上復(fù)制vue-waterfall-easy組件的完整代碼，粘貼為自己本地項(xiàng)目的組件(源碼鏈接：vue-waterfall-easy)，打開(kāi)鏈接，進(jìn)入src/components/vue-waterfall-easy.vue，直接復(fù)制所有代碼即可。

第二種是通過(guò)npm進(jìn)行全局安裝，直接用命令行在你的項(xiàng)目目錄下執(zhí)行：npm install vue-waterfall-easy --save-dev

執(zhí)行成功后，在node_modules目錄下會(huì)出現(xiàn)一個(gè)vue-waterfall-easy的目錄（其實(shí)就是整個(gè)demo的實(shí)例源碼）

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

如果是直接復(fù)制的組件源碼作為本地組件，那就直接與普通組件一樣引入就可以了：

import vueWaterfallEasy from '你的路徑/組件名.vue'

 如果是通過(guò)npm安裝的組件，那就更簡(jiǎn)單了：

import vueWaterfallEasy from 'vue-waterfall-easy'

直接這樣就可以調(diào)用到node_modules目錄下打包好的vue-waterfall-easy組件了；

當(dāng)然，引入組件之后一定不要忘記在當(dāng)前組件中注冊(cè)該組件哦：

export default {
 components: {
 vueWaterfallEasy
 } 
}

三、定義需要用到的變量及方法

data () {
 return {
 imgsArr: [], //存放所有已加載圖片的數(shù)組（即當(dāng)前頁(yè)面會(huì)加載的所有圖片）
 fetchImgsArr: [] //存放每次滾動(dòng)時(shí)下一批要加載的圖片的數(shù)組
 }
 },
　　methods: {
　　　initImgsArr (n, m) { //初始化圖片數(shù)組的方法，把要加載的圖片裝入
　　　　var arr = []
　　　　for (var i = n; i < m; i++) {
　　　　　　arr.push({ src: `static/img/${i + 1}.jpg`, link: '', info: '一些圖片描述文字' }) //src為加載的圖片的地址、link為超鏈接的鏈接地址、

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//info為自定義的圖片展示信息，請(qǐng)根據(jù)自己的情況自行填寫(xiě)
　　　　}
　　　　return arr
　　　},

　　　fetchImgsData () { //獲取新的圖片數(shù)據(jù)的方法，用于頁(yè)面滾動(dòng)滿足條件時(shí)調(diào)用
　　　　this.imgsArr = this.imgsArr.concat(this.fetchImgsArr) //數(shù)組拼接，把下一批要加載的圖片放入所有圖片的數(shù)組中
　　　}
　　},
　　created () {
　　　　this.imgsArr = this.initImgsArr(0, 10) //初始化第一次（即頁(yè)面加載完畢時(shí)）要加載的圖片數(shù)據(jù)
　　　　this.fetchImgsArr = this.initImgsArr(10, 20) // 模擬每次請(qǐng)求的下一批新的圖片的數(shù)據(jù)數(shù)據(jù)
　　}

四、模版中調(diào)用組件

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

想必大家都能看懂，這里不再贅述。如果你只是需要一個(gè)滾動(dòng)無(wú)限加載的瀑布流圖片展示，到這一步就已經(jīng)能滿足需求了。當(dāng)然，看過(guò)我發(fā)的源碼鏈接里的源碼的小伙伴會(huì)發(fā)現(xiàn)源碼中的App.vue模版中是這樣引用的：

<template lang="pug"> //不要忽略這個(gè)語(yǔ)言屬性哦
#app
 h2.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>

有了解過(guò)的小伙伴應(yīng)該能看出來(lái)這里應(yīng)用的是pug（也就是大名鼎鼎的jade，后來(lái)因?yàn)樯虡?biāo)的原因改名為pug）的語(yǔ)法，至于為什么這樣寫(xiě)，可以參見(jiàn)vue-waterfall-easy.vue源碼的第81～90行以及github上（上面我給的鏈接就是）文檔的參數(shù)說(shuō)明：

a.img-box(
 v-for="(v,i) in imgsArrC",
 :href="v.link",
 :
 )
 .img-inner-box
 div.img-wraper(:)
 img(:src="v.src")
 .img-info
 slot(:index="i",:value="v")

注：報(bào)pug錯(cuò)誤的小伙伴請(qǐng)自行百度下載pug依賴(lài)庫(kù)

參數(shù)說(shuō)明

五、運(yùn)行項(xiàng)目

如果以上步驟沒(méi)有出現(xiàn)問(wèn)題的話，那么恭喜你，你已經(jīng)可以看到自己的瀑布流了。當(dāng)然，我們可以從文檔中看到，我們還可以進(jìn)行一些其他的配置：

組件參數(shù)

props: {
 gap: { // 圖片間隔
 type: Number,
 default: 20
 },
 maxCols: { // 最大的列數(shù)
 type: Number,
 default: 5
 },
 imgsArr: { // 請(qǐng)求返回的圖片數(shù)據(jù)，格式：[{src:'1.jpg','link':'url1' info:'自定義圖片信息'},{src:'2.jpg','link':'url2',info:'自定義圖片信息'}...]
 type: Array,
 required: true
 },
 imgWidth: { // 指定圖片的統(tǒng)一寬度
 type: Number,
 default: 240
 },
 timeOut: { // 預(yù)加載事件小于500毫秒就不顯示加載動(dòng)畫(huà)，增加用戶(hù)體驗(yàn)
 type: Number,
 default: 500
 }
}

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

以上是“vue.js組件vue-waterfall-easy如何實(shí)現(xiàn)瀑布流效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！