Vue中实现特效下拉加载更多数据

1.功能需求

      其实在很多的页面开发过程中，有些页面尤其是评论页面，在第一次加载的时候并不会加载很多的相关数据，而是加载一部分，当用户下拉旁边的滚动条时，尤其是滚动条移动到底部的时候，就会出现行的相关内容，这是怎么实现的呢？其实和分页大致一个原理，就相当于目前展示的是第一页的相关内容，当我们滑动到底部的时候就默认去获取第二页的相关内容。其实elementUi中也有这种的组件，但在运用的时候其实会发现并不是很好用那么该怎么实现这一需求场景呢？

2.页面展示

      粗糙的页面展示如下，由于没有发送请求，就采取的for循环往数组里面添加相关的内容，如下图一样，且在页面中通常在不只是有这一个页面这里就采取了一个蓝色的盒子来进行相关的站位，来模拟头部的相关内容。大致具体实现就如下面的效果图一样，就滑动到底部是会请求新的相关数据。那么具体实现的代码如下

 

 3.实现代码

     其实其中的核心代码如下，大致实现的具体原理如下，我们首先需要获取窗口的大小以及用来装载数据的父盒子的高度，因为根据这两个其实我们就可以获取到浏览器窗口实际能滚动的距离，

但是往往在页面开发过程中，一个页面中不只是有我这一个元素，通常这个功能用于网页底部，因此我们就需要获取这个父盒子距离页面顶部的距离，因此在滑动的过程中这段距离是不算在我们的scrollY中的，因此我们需要减去，最终我们将误差设置在10 (这个误差可以根据自己的喜好进行相关的设定，但不建议太大 ) 内，这样就可以实现不断获取刷新的功能了。且如果还有底部，则需要减去底部元素的宽度。但通常情况下这种都是下面没有元素。即若下面没有元素，去掉bottom.clientHeight 即可。

    getMainBox(){
      let Main = this.$refs.Main
      let bottom = this.$refs.bottom
     // console.log(Main.offsetTop);      //父盒子距离浏览器顶部的高度
     // console.log(window.innerHeight);  //浏览器的高度，即页面窗口的高度
     // console.log(Main.clientHeight);  //父盒子的高度(加上padding和margin)
     // console.log(window.scrollY);     //浏览器右边的滚动条滚动距离
      if(Math.abs(Main.clientHeight - window.innerHeight - (window.scrollY-Main.offsetTop-bottom.clientHeight)) <= 10){
        console.log('我滑动到底部了');
        alert('12323132')
        //这里在运用在获取新的相关数据即可
        for(let i = 0;i<10;i++){
          this.listData.push({infoData:'新加载的相关数据'})
        }
      }
    }

  4.全部代码

      代码采取的vue框架实现

<template>
  <div class="header"></div>
  <div class="Main" ref="Main">
    <div class="Item" v-for="(item,index) in listData" :key="index">{{ item.infoData }}</div>
  </div>
  <div class="bottom" ref="bottom"></div>
</template>

<script>
export default {
  name: 'scrollLoad',
  data() {
    return {
      listData: [
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        },
        {
          infoData: '123132'
        }
      ]
    }
  },
  mounted(){
    this.scrollWindow()
  },
  methods:{
    scrollWindow(){
      window.addEventListener('scroll',()=>{
        this.getMainBox()
      })
    },
    getMainBox(){
      let Main = this.$refs.Main
      let bottom = this.$refs.bottom    //底部的相关DOM
     // console.log(Main.offsetTop);      //父盒子距离浏览器顶部的高度
     // console.log(window.innerHeight);  //浏览器的高度，即页面窗口的高度
     // console.log(Main.clientHeight);  //父盒子的高度(加上padding和margin)
     // console.log(window.scrollY);     //浏览器右边的滚动条滚动距离
      if(Math.abs(Main.clientHeight - window.innerHeight - (window.scrollY-Main.offsetTop-bottom.clientHeight)) <= 10){
        console.log('我滑动到底部了');
        alert('12323132')
        //这里在运用在获取新的相关数据即可
        for(let i = 0;i<10;i++){
          this.listData.push({infoData:'新加载的相关数据'})
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header{
  background: blue;
  height: 200px;
  margin-bottom: 10px;
}
.Main {
  border: 1px solid #ccc;
  .Item {
    margin-top: 5px;
    height: 30px;
    line-height: 30px;
    background: red;

  }
}
.bottom{
  background: green;
  height: 200px;
  margin-bottom: 10px;
}
</style>

5.相关总结

     虽然这种加载方式可以给用户一种很舒服的体验，但是其实最难的是在页面刷新后的数据展示，是直接返回网站顶部这种用户重新下拉获取，还是保持到当前页中的数据呢？这背后其实也值得让我们进行相关的思考，欢迎大家一起讨论学习，相互进步