用vue做一个无限屏（无限加载）

先看效果

代码

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

有问题欢迎留言（有错误欢迎提出🤣）