<template>
<waterfall column-count="2" column-width="auto" column-gap="15" left-gap="15" right-gap="15">
<cell class="cell" v-for="(item, index) in lists">
<div class="panel" >
<image :src="item" mode="widthFix" :lazy-load="true"></image>
<text class="text">{{index}}</text>
</div>
</cell>
<header class="footer" ref="footer" @appear="footerAppear">
<text class="text">loading...</text>
</header>
</waterfall>
</template>
<script>
export default {
data () {
return {
lists: [],
}
},
onShow() {
this.getList();
},
methods: {
footerAppear: function(e) {
this.getList();
},
getList:function(){
const _this = this;
let items = ['https://img1.baidu.com/it/u=3544807609,487540991&fm=253&fmt=auto&app=138&f=JPEG','https://img2.baidu.com/it/u=1737024211,1838882009&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500','https://img2.baidu.com/it/u=2687929243,1419060350&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500','https://img1.baidu.com/it/u=3311575308,161259849&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=516','https://img1.baidu.com/it/u=3544807609,487540991&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=721','https://img2.baidu.com/it/u=975386126,2758031912&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750','https://img0.baidu.com/it/u=824202483,3856266619&fm=253&fmt=auto&app=138&f=JPEG?w=850&h=500'];
for (let i = 0; i < 15; i++) {
const num = Math.ceil(Math.random()*(items.length - 1));
_this.lists.push(items[num])
}
},
}
}
</script>
<style scoped>
.panel {
margin-top: 15px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
.text {
font-size: 12px;
text-align: center;
color: #41B883;
}
.footer {
height: 94px;
justify-content: center;
align-items: center;
background-color: #00cc99;
}
</style>
白衣大魔王
- 发布：2022-01-26 12:02
- 更新：2022-11-10 11:16
- 阅读：821
