通过js监听滚动条,滚动到底部加载更多
vue 项目:
在mounted中监听滚动事件:在离开页面的时候取消监听
mounted() { window.addEventListener("scroll", this.handleScroll, true); }, destroyed() { // 离开该页面需要移除这个监听的事件,不然会报错 window.removeEventListener("scroll", this.handleScroll); },
在method中:
// 保存滚动值,这是兼容的写法 handleScroll() { //变量scrollTop是滚动条滚动时,距离顶部的距离 let that = this; $(".contentSecFind").scroll(function () { console.log("进来"); let $this = $(this), viewH = $(this).height(), //可见高度 contentH = $(this).get(0).scrollHeight, //内容高度 scrollTop = $(this).scrollTop(); //滚动高度 console.log("scrollTop:" + scrollTop); console.log("contentH:" + contentH); console.log("viewH:" + viewH); //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容 let diffnum = scrollTop / (contentH - viewH); if (diffnum >= 0.95) { //到达底部100px时,加载新内容 // 这里加载数据.. let itemData = that.lobbyList[that.lobbyList.length - 1]; that.findCaseList(itemData.first_public_time); } }); },
每天将自己工作和学习中遇到的问题和好的方法写下来,作为积累,养成一个好习惯,从此刻开始~