瀑布流
/* 瀑布流 main.js*/
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
<div class="container-water-fall water-content">
<waterfall :col="col" :data="data" @loadmore="loadmore">
<template>
<div
class="cell-item"
v-for="(item,index) in data"
:key="index"
>
<div class="mImg" @click="goDetail(item.ID)">
<el-image :src='linkUrl+item.culImg'>
<div slot="error" class="image-slot">
<img src="../../assets/no_data.png" alt="">
</div>
</el-image>
</div>
<div class="item-body">
<div class="item-footer">
<p>文物:{{item.CUL_NAME}}</p>
<p>博物館：{{item.UNIT_NAME?item.UNIT_NAME:'無'}}</p>
</div>
</div>
</div>
</template>
</waterfall>
</div>
下拉加載
mounted() {
window.addEventListener("mousewheel",this.scroll,true);
// window.addEventListener("scroll", () => {});
},
destroyed: function() {
window.removeEventListener("mousewheel", this.scroll); // 離開頁面清除（移除）滾輪滾動事件
},
<template>
<div id="exhibition" @scroll="scroll">
</div>
</template>
