vue-waterfall-easy是一款很好的瀑布流插件
以下是代码
转载自GitHub的官方文档
https://github.com/lfyfly/vue-waterfall-easy
以下是代码
<template>
<div style="position: absolute; bottom: 0;top: 50px;width: 100%; margin-bottom: 60px;">
<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"></vue-waterfall-easy>
</div>
</template>
<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
import axios from 'axios'
export default {
name: "fishHistory2",
data() {
return {
imgsArr: [],
group: 0,
}
},
components: {
vueWaterfallEasy
},
methods: {
getData() {
axios.get('./static/mock/data.json?group=' + this.group)
.then(res => {
this.imgsArr = this.imgsArr.concat(res.data)
this.group++
})
},
},
created() {
this.getData()
}
}
</script>
<style scoped>
</style>
以下是模拟接口的静态文件 data.json
[
{
"src": "./static/img/1.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/2.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/3.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/4.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/5.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/6.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/7.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/8.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/9.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/10.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/11.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/12.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/13.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/14.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/15.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/16.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/17.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/18.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/19.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/20.jpg",
"href": " /test",
"info": "一些图片描述文字"
}
]
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)