PC端实现列表懒加载

安装引入lodash

npm i --save lodash

import _throttle from 'lodash/throttle'

给Vue组件根标签添加滚动事件，PC端是滚动实现懒加载，所以必须要有滚动事件，不过这个滚动事件不一定是在组件的根标签上，也可以是在其他元素，但是这个元素必须是列表元素的父级以上的组件。

<div id="recomand-show" @scroll="onScroll">div>
1

下面来看看懒加载的实现的JS方法

//懒加载的方法
onScroll: _throttle(function () {
     
  var info = document.getElementById('recomand-show');
  var scrollTop = info.scrollTop;
  var clientHeight = info.clientHeight;
  var scrollHeight = info.scrollHeight;

  if (scrollHeight - clientHeight < scrollTop + 0.1) 
1
2
3
4
5
6
7
8