vue下拉加载（全适用） 详细篇

写项目中遇到的问题，我遇到了如下坑：

1. 得到的scrolltop clientheight永远都是0（我以为是因为我是分组件写的项目所以还尝试过把每个组件的高度求出来传给父组件，相加得到。）

其实和分几个组件没有关系，就在需要滚动的那个页面获取即可。

思路就是：实时的监听页面滚动的高度，当滚动的高度 与 页面工作区域的高度 相加的和 等于 这个div的高度（或者小于100px，这个可以自己定）时，调用加载下方内容的方法，改变flag值

第一步：在mounted里监听scroll，实时获取滚动的高度

mounted () {
      window.addEventListener('scroll', this.handleScroll,true);//监听滚动条
}

第二步：在methods中定义handleScroll函数，在其中获取滚动距离dscrollTop，页面折叠总高度clientHeight 和 工作区高度pageHeight，并实时计算，如果符合if条件说明已经下拉到底端了，这里改变flag值，因为我这边是为了子页面的v-show

handleScroll() {
        let dscrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        const pageHeight = this.$refs.companyDetail.offsetHeight;
        console.log("滚动距离", dscrollTop, clientHeight, pageHeight);//打印看一下

        if(dscrollTop + clientHeight === pageHeight){
          this.showAnalysis = true;//控制下方展示与否的布尔值，在子页面watch
        }
   }

第三步：把这个flag传给子页面

<analysis
   :showAnalysis="showAnalysis">
</analysis>

第四步：在子页面接收并实时监听值的变化

props: {
        showAnalysis:Boolean
      }

watch: {
    showAnalysis(val){
      if(val === true){
        this.changeWord(this.name);//加载数据的方法
      }
    }
}

<el-row class="loading" v-show="!showAnalysis">
   <img src="../../assets/image/comloading.svg" width="50"/>
</el-row>
<div v-show="showAnalysis">123131213</div>

这是在加载的时候出来一个加载的图片，加载完再显示下方内容

 

真丶亲测没问题！百度了一堆博客，还亲测可用，没一个好使的，都给我用我这个