内容简介:上拉加载在h5移动开发经常需要用到,就类似于有兴趣的同学可以查看一般我们的做法是判断scrollTop和clientHeight对比scrollHeight,得出是否在底部。
上拉加载在h5移动开发经常需要用到,就类似于
有兴趣的同学可以查看 react-loadmore ,使用起来非常简单!
一般我们的做法是判断scrollTop和clientHeight对比scrollHeight,得出是否在底部。
参考 detect-if-browser-window-is-scrolled-to-bottom
let scrollTop =
(document.documentElement && document.documentElement.scrollTop) ||
document.body.scrollTop;
let scrollHeight =
(document.documentElement && document.documentElement.scrollHeight) ||
document.body.scrollHeight;
let clientHeight =
document.documentElement.clientHeight || window.innerHeight;
let scrolledToBottom =
Math.ceil(scrollTop + clientHeight) >= scrollHeight;
复制代码
但是这种做法在移动端会有各种各样的问题,包括浏览器版本,ios,Android。
最近发现一种比较简单的办法~
此方法非常简单,只需要为元素生成一个IntersectionObserver,并且监听该元素,然后在监听的回调判断元素的intersectionRatio比率即可达到所需。这是核心代码.
componentDidMount() {
if (!this.props.Footer) this._svgaLoad();
try {
const node = document.getElementById('bottom')
this.observer = new IntersectionObserver(this.insideViewportCb);
this.observer.observe(node);
} catch (err) {
console.log("err in finding node", err);
}
window.addEventListener("scroll", this.handleOnScroll);
}
insideViewportCb(entries) {
const { fetching, onBottom } = this.props;
entries.forEach(element => {
//在viewport里面
if (element.intersectionRatio > 0&&!fetching) {
onBottom();
}
});
}
复制代码
给定一个底部的样式,然后用IntersectionObserver对它进行监听,只要判断它在viewportport就可以触发加载!
有兴趣的同学可以查看 react-loadmore ,使用起来非常简单!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序设计方法(中文版)
Matthias Fellisen / 黄林鹏、朱崇恺 / 人民邮电出版社 / 2003-12 / 49.00元
《程序设计方法》以Scheme语言为基础介绍计算和程序设计的一般理论和实践。《程序设计方法》由8个部分和7个独立的章节(第8、13、18、24、29、33、38章)组成。8个部分主要讨论程序设计,独立章节则介绍一些与程序设计和计算相关的话题。《程序设计方法》第1至第3部分介绍了基于数据驱动的程序设计基础。第4部分介绍了程序设计中的抽象问题。第5部分和第6部分是与递归及累积相关的内容。《程序设计方法......一起来看看 《程序设计方法(中文版)》 这本书的介绍吧!