下拉加载更多完整代码vue

下拉加载更多完整代码

<template>
  <div id="page1">
<!--    <h1>Random User</h1> -->
    <div class="person" v-for="(person, index) in person" :key="index">
      <div class="left">
        <img :src="person" alt="">
      </div>
      <div class="right">
        <p>{{ person}} {{ person }}</p>
        <ul>
          <li>
            <strong>Birthday:</strong> {{person}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  // 创建一个存放用户数据的数组
  data () {
    return {
      person: [1, 2, 3, 4, 5, 6, 7],
      k: 0
    }
  },
  methods: {
    lazyLoading () { // 滚动到底部，再加载的处理事件
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      const clientHeight = document.documentElement.clientHeight
      const scrollHeight = document.documentElement.scrollHeight
      //   document.documentElement
      console.log('scrollTop', scrollTop)
      console.log('clientHeight', clientHeight)
      console.log('scrollHeight', scrollHeight)
      if (scrollTop + clientHeight >= scrollHeight) { // 滚动到底部，逻辑代码
        // 事件处理
        console.log('我已经滚动到底部了触发这个事件了')// 此处可以添加数据请求
        this.person = this.person.concat(this.person)
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.lazyLoading) // 滚动到底部，再加载的处理事件
  }
}

</script>

<style>
.person {
  background: #ccc;
  border-radius: 2px;
  width: 20%;
  margin: 0 auto 15px auto;
  padding: 15px;
}
  .person img {
    width: 100%;
    height: auto;
    border-radius: 2px;
  }
  .text-capitalize {
    text-transform: capitalize;
  }
    p:first-child {
    text-transform: capitalize;
    font-size: 2rem;
    font-weight: 900;
  }
  #page1 {
      width: 100%;
      background: skyblue;
  }
</style>