因为项目在页面请求数据时,是先加载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钩子函数里直接调用即可。