阅读 68

前端学习笔记:使用原生JS实现“上拉加载更多”的功能

使用场景

常用于移动端的分页加载,例如淘宝京东的推荐更多商品,搜索页面的更多结果等等。一图说明:

主要难点

  • 如何使用CSS画出loading图标
  • 如何使用JS触发上拉刷新事件

画loading图标

做之前一直以为图标画起来会很麻烦,事实证明非常简单,只需要两步:

1、画一个没有底部border的圆环

.icon-loading {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #ddd;
    border-bottom: none;
    background: transparent
}
复制代码

2、让它动起来

.icon-loading {
    animation: rotate 0.7s infinite
}
@keyframes
rotate {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(180deg)
    }
    100% {
        transform: rotate(360deg)
    }
}
复制代码

画出来的效果

监测底部上拉事件

原理:监测浏览器的滚动事件,只要滚动的距离(即scrollTop)和页面的显示高度(即windowHeight)大于等于整个文档的高度(即scrollHeight),就意味着页面滑到了底部,触发了上拉事件。即:


window.addEventLisetner("scroll", function() {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
    let windowHeight = window.innerHeight;
    let scrollHeight = document.body.scrollHeight;
    if (scrollTop + windowHeight >= scrollHeight) {
        //上拉加载更多
        ajaxReq()
    }
})

function ajaxReq() {
    
}
复制代码

这里面有几个坑。

第一个坑,不同浏览器的scrollTop计算方式不一样。要解决这个兼容性问题,百度出来的结果是这样的,不知道对不对。

let scrollTop = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
复制代码

其中document.body.scrollTop为未指定文档类型时的滚动高度,document.documentElement.scrollTop为指定文档类型为html时的滚动高度,window.pageYoffset为safari浏览器的滚动高度。

第二个坑,浏览器无法准确计算到达页面的底部。最开始我的判断条件是:

window.addEventListener("scroll", function() {
    if (scrollTop + windowHeight === scrollHeight) {
    //触发上拉事件
    }
})
复制代码

发现事件始终没法触发,在控制台打印了一下这些变量,发现始终没有触发等于条件。于是恍然大悟,将===改成了>=,顺利解决了问题。

不过,这样带来了一个不大不小的bug:在页面滑到底部以后向上滑动一段距离,也会触发对应的事件。虽然不会影响大局,但总是美中不足。目前这个问题个人没有找到好的解决方案,期待大家的解答。

个人困惑

浏览器为什么无法准确计算到达页面的底部?

关注下面的标签,发现更多相似文章
评论