项目中的订单列表需要用到订单的分页查询,默认加载第一页,滑到底部的时候,加载下一页的数据。所以用getBoundingClientRect来重写一下,之前都是用旧方法的,因为都是手机端的项目,所以暂时就不考虑兼容的问题了
1、容器添加
<div className="order-wrapper clearfix" ref="orderList"></div>
2、
组件挂载和卸载时的处理
componentDidMount = () => {
window.addEventListener("scroll touchmove",this.handleScorll.bind(this))
}
componentWillUnmount () {
window.removeEventListener("scroll touchmove ", () => {
console.log('--removeEventListener--scroll')
})
}
3、主要的事件处理程序
handleScorll = () => {
// isLoadMore是正在加载更多
//pageNum是当前页码
//isLastPage用来判断是否是最后一页的
const { isLoadMore ,pageNum,isLastPage} = this.state;
// 视窗高度-也就是浏览器可视区域高度
let windowHeight = document.documentElement.clientHeight;
le