先看效果
代码
<template>
<div>
<div class="box" v-for="(i,k) in beers" :key="k">
<img :src="i.img" alt="">
<p>{{ i.name }}</p>
</div>
<!-- 当网络有延迟提时,显示这个div提示用户 -->
<div class="load" v-if="load"><p>玩命加载中... ...🤣</p></div>
</div>
</template>
<script>
export default {
name: 'home',
data: () => ({
beers: [], // 用来接收请求成功的内容
load: false // 控制网络延迟提示div的显示
}),
methods: {
// 网络请求方法
addBeer () {
this.axios.get('https://api.punkapi.com/v2/beers/random').then((response) => {
const api = response.data[0]
const apiInfo = {
name: api.name,
img: api.image_url
}
this.load = false
// 把请求成功的内容添加到数组中
this.beers.push(apiInfo)
})
},
scroll () {
window.onscroll = () => {
// 当离底部还有1px时触发
const bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 1
if (bottomOfWindow) {
this.load = true
this.addBeer()
}
}
}
},
mounted () {
// 当页面加载DOM完时,监控scroll()方法是否成立触发条件
this.scroll()
},
beforeMount () {
// 加载原始数据
this.addBeer()
}
}
</script>
<style lang="scss" scoped>
.load {
width: 100%;
height: 200px;
text-align: center;
background-color: brown;
}
</style>
有问题欢迎留言(有错误欢迎提出🤣)