vue.js組件vue-waterfall-easy如何實現瀑布流效果

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

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

有了解過的小伙伴應該能看出來這里應用的是pug（也就是大名鼎鼎的jade，后來因為商標的原因改名為pug）的語法，至于為什么這樣寫，可以參見vue-waterfall-easy.vue源碼的第81～90行以及github上（上面我給的鏈接就是）文檔的參數說明：

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

注：報pug錯誤的小伙伴請自行百度下載pug依賴庫

參數說明

五、運行項目

如果以上步驟沒有出現問題的話，那么恭喜你，你已經可以看到自己的瀑布流了。當然，我們可以從文檔中看到，我們還可以進行一些其他的配置：

組件參數

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

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

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