因为项目在页面请求数据时，是先加载15条，然后往下滚动再加载15条的
<div class="db-main-box" v-scrollfix="getScrollMore"> //自定义一个滚动指令
<div class="db-subnav" @click="setFilter">
<i class="cs-zuixin"></i>
<span>最新文章</span>
</div>
</div>
加载小于三页时，触发自动加载事件
getScrollMore (fetch, top) {
if (fetch && this.params.pageNum < 3) this.getMore()
}
getMore () {
this.params.pageNum++
this.fetchData()
}
自定义scrollfix事件： 每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性 1）clientHeight、clientWidth→元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度
2）offsetHeight、offectWidth→元素宽高（height+padding+border，包含边框），可以理解为元素的可视高度
3）scrollHeight、scrollWidth→元素宽高（内容的实际高度+上下padding<如果没有限制div的height，即height是自适应的，那么scrollHeight=clientHeight>）
4）scrollHeight与offsetHeight的区别？ offsetHeight即是自身的高度，scrollHeight是自身的高度+隐藏元素的高度（即是内层元素的offsetHeight）
5）offsetTop：为容器相对于document的top的绝对偏移---→等于top+margin-top 同理offsetLeft：容器相对于document的left的绝对偏移---→等于left+margin-left
6）clientTop: 容器内部相对于容器本身的top偏移，实际就是border-width
7）scrollTop: Y轴的滚动条没有，或滚到最上时是0；Y轴的滚动条滚到最下时是 scrollHeight-clientHeight。滚动时通常只能scrollTop，当scrollTop为 0 到 scrollHeight-clientHeight，是正常的滚动距离，否则就是滚动过头了。
Vue.directive('scrollfix', {
inserted (el, cb) {
// 不是元素节点 || 未设置回调函数
if (el.nodeType !== 1 || !cb) return
let direct = 'down'
let rollHeight = 0
let scrollDisable = false
let getScrollEventTarget = (target) => {
while (target.nodeType === 1 && target.tagName !== 'BODY' && el.tagName !== 'HTML') {
var overflowY = getComputedStyle(target).overflowY //获取元素节点的overflow-Y属性
if (overflowY === 'scroll' || overflowY === 'auto') {
return target
}
target = target.parentNode //元素节点的父节点
}
return window
}
let targetNode = getScrollEventTarget(el)
let scrollListener = () => {
direct = targetNode.scrollTop > rollHeight ? 'down' : 'up' //网页被卷去的高度如果大于0，就是向下，否则就是向上
rollHeight = targetNode.scrollTop //将网页被卷去的高度赋值给rollHeight
if (targetNode.clientHeight + targetNode.scrollTop >= targetNode.scrollHeight - 500) {
//元素可视区域高度加上被卷去的高度如果大于等于自身的高度+隐藏元素的高度-500，scrollDisable就为true，这里需要注意的是，如果页面太长，会导致加载时出现一段时间的空白
if (!scrollDisable) {
cb.value(!scrollDisable, rollHeight, direct)
}
scrollDisable = true
} else {
scrollDisable = false
cb.value(scrollDisable, rollHeight, direct)
}
}
el.unbindEventListener = () => {
targetNode.removeEventListener('scroll', scrollListener) //解绑事件解决内存泄漏问题
}
targetNode.addEventListener('scroll', scrollListener)
},
unbind (el) {
if (el.unbindEventListener) el.unbindEventListener()
}
})
如果忘记注释unbind方法，就会导致出现内存泄漏，给元素绑定的scroll方法，会一直存在内存里，比如我进了页面滚动到第3页，出去，再点一个页面，当滚动到第4页时，将会请求2次，一次是上个页面的第4页，一次是本次页面的第4页，当你退出，再进一个页面，当滚动到第5页时，将会请求3次（上上页，上页和本页），这就是典型的事件未解绑导致的内存泄漏。
所以需要给元素解绑，好在vue指令提供了unbind钩子函数，但是这里依然有个技术巧点就是：
1、我们scroll的元素可能是绑定的元素的父级等等，需要一层一层往上找
2、就是解绑的时候我们也需要找到那个父级元素等等，然后还需要remove对应的方法，那么肯定不可能在unbind里再写一次，所以就可以在insert钩子函数里，给el绑定一个解绑事件el.unbindEventListener，在unbind钩子函数里直接调用即可。
