Vue混入mixins滚动触底的方法

function getWindowHeight() {
 return document.documentElement.clientHeight;
}

function getScrollHeight() {
 return Math.max(document.documentElement.scrollTop,window.pageYOffset||0)
}

function getDocumentTop() {
 return document.documentElement.offsetHeight;
}

 <div id="app">
 <ul>
  <li v-for="item in list" :key="item" > {{item}}</li>
 </ul>
 </div>
 created(){
  // 初始化数据
  this.list = Array.from(Array(10),(item,index)=>index)
  // 通过监听滚动事件来判断 可视区域 ， 滚动高度 ，文档高度的关系
  window.addEventListener('scroll',()=>{
  let isBottom = (getScrollHeight() + getWindowHeight()) >= getDocumentTop()
  if(isBottom){
   console.log('触底了',new Date())
   let list = this.list
   let last = list[list.length-1]
   let newList = Array.from(Array(10),(item,index)=>index+last+1)
   this.list.push(...newList)
  }
  })
 } 

methods:{
 // 返回一个 promise ，用于请求服务端数据
 findDataList(){
 let list = this.list
 let last = list[list.length-1]
 return new Promise((resolve)=>{
 // 模拟服务端数据
 let newList = Array.from(Array(10),(item,index)=>index+last+1)
  setTimeout(() => {
  resolve(newList)
  }, 1000);
 })
 }
}

 created(){
 let fn = throttle(()=>{
  let isOver = (getScrollHeight() + getWindowHeight()) >= (getDocumentTop()- MIN_INSTANCE)
  // 触底时进行数据加载
  if(isOver){
  // 创建加载组件
  this.loadMore&&this.loadMore()
  }
 },DEALY_TIME)
 window.addEventListener('scroll',fn)
 },

<template>
 <div id="loading-alert">
  <i class="el-icon-loading"></i>
  <span>{{ message }}</span>
 </div>
</template>

<script>
export default {
 props:{
 message:{
  type:String,
  default:'正在加载更多数据'
 }
 },
};

import load from './load.vue'
data(){
 return {
 isLoading:false,
 component:null
 }
},
created(){
 let fn = throttle(()=>{
 let isOver = (getScrollHeight() + getWindowHeight()) >= (getDocumentTop()- MIN_INSTANCE)
 // 触底时进行load组件显示
 if(isOver){
  // 判断loading组件是否已经存在，不存在就创建一个
  if(!this.component){
  this.component = extendComponents(load)
  }
  // 创建加载组件
  this.loadMore&&this.loadMore()
  // 判断当前状态来控制loading的组件显示与否
  if(!this.isLoading){
  this.component.$el.remove()
  // 将loading组件置为空
  this.component = null
  }
 }
 },DEALY_TIME)
 window.addEventListener('scroll',fn)
},