需求
分析:我们需要实现两个方向(向下拉动,向上滑动)上的拉动刷新,考虑完成 PullDownRefresh 和 PullUpRefresh 两个组件的编写。思考其中细节:
① 自适应滚动的内容是基于页面还是基于内部容器;
② 组件是否可以组合使用;
③ 状态提示loading如何设计;
④ loading开始与结束的时机,定时器规定时间?数据加载完结束?
目前实现:
① 暂时未考虑页面和内部容器同时滑动的情况;
② 通过 props.children
传入需要拉动刷新的内容,两个组件可组合使用;
③ 通过一个 refreshing
状态变量来决定当前是否处于刷新状态;
④ 通过在 componentWillReceiveProps
生命周期钩子中接收新状态/数据来控制 loading 的结束,即 refreshing=false
依旧是模仿掘金主页的实现
预备知识
弄清楚元素的几个属性值(翻一下MDN吧)
- clientHeight:这个属性是只读属性,对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距
-
offsetHeight 是一个DOM属性。它有时被称为一个元素的物理/图形的尺寸,或是一个元素的边界框(border-box)的高度。
-
scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。部到视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0
-
scrollHeight:这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。(属性将会对值四舍五入取整)。包括元素的padding,但不包括元素的border和margin。scrollHeight也包括
判断是否滚动到底部:::before
和::after
这样的伪元素。element.scrollHeight - element.scrollTop === element.clientHeight
-
getBoundingClientRect()
方法返回元素的大小及其相对于视口的位置。 -
Window.scrollY:返回文档在垂直方向已滚动的像素值。跨浏览器兼容:
var supportPageOffset = window.pageXOffset !== undefined; var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
-
Touch.pageY:触点相对于HTML文档上边沿的的Y坐标. 和 clientY 属性不同, 这个值是相对于整个html文档的坐标, 和用户滚动位置无关. 因此当存在垂直滚动的偏移时, 这个值包含了垂直滚动的偏移
下拉刷新组件
首先要明确的是下拉刷新组件的触发条件:① 内容垂直滚动的距离应该为0;② 触屏拉动的距离应该大于某个给定的阈值;③ 明确究竟是哪个容器设置了内容自动滚动。下面以我写的具体例子作为参考(没有考虑复杂情况)
- 在container页面使用 PullDownRefresh 套了需要下拉刷新的内容,这里 scroll_content 设置了
overflow-y:auto
<div className="main scroll_content"> <PullDownRefresh onRefresh={this._onRefreshDown} refreshing={this.state.refreshing}> {entryList.map((element, index) => { return <EntryItem item={element} key={index} /> })} </PullDownRefresh>
- 在PullDownRefresh组件中
<> {this.state.refreshing ? <RefreshLoading orient="up" /> : null} <div ref={el => (this.scrollContent = el)} onTouchStart={this.handleTouchStart} onTouchMove={this.handleTouchMove} onTouchEnd={this.handleTouchEnd} > {this.props.children} </div> </>
- 在 handleTouchStart 中我们记录初始触屏点位置
handleTouchStart = e => { this.setState({ startPos: e.touches[0].pageY }) }
- 在 handleTouchMove 中,如果两个触屏点距离大于minHeight,且当前不处于正在刷新状态,且内容滚动高度为0,那么可以开始加载(
refreshing: true
)handleTouchMove = e => { if ( this.state.refreshing === false && this.state.parentNode.scrollTop === 0 ) { let _pullHeight = e.touches[0].pageY - this.state.startPos if (_pullHeight > this.state.minHeight) { this.setState({ refreshing: true }) } } }
- 在 handleTouchEnd 中,我们进行数据更新请求。因为我们观察刷新操作是释放之后才开始进行的,而且在move中进行的话可能多次触发
handleTouchEnd = e => { if (this.state.refreshing) { this.props.onRefresh() } }
- 如果我们直接在页面进行请求,可以在promise的finally之后,设置更新结束(
refreshing: false
);如果我们是使用外部传入的数据,需要在 componentWillReceiveProps 中设置更新结束(refreshing: false
)componentWillReceiveProps(nextProps) { if (nextProps.refreshing !== this.state.refreshing) { this.setState({ refreshing: nextProps.refreshing }) } }
- 获取滚动容器的方法,可以在componentDidMount生命周期中获取
var scrollContent = ReactDOM.findDOMNode(this.scrollContent).parentNode
- 基于页面滚动
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); var scrollContent = isCSS1Compat ? document.documentElement : document.body;
- 在 handleTouchStart 中我们记录初始触屏点位置
上滑加载组件
原理类似,不过多赘述,判断到达底部的条件是:
scrollContent.scrollHeight - scrollContent.scrollTop - scrollContent.clientHeight === 0
浏览器兼容
我们既想要滚动的功能,又不希望内部容器显示滚动条,考虑为内部容器添加类 scroll_content 实现
::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}
.scroll_content {
-ms-scroll-chaining: chained;
-ms-overflow-style: none;
-ms-content-zooming: zoom;
-ms-scroll-rails: none;
-ms-content-zoom-limit-min: 100%;
-ms-content-zoom-limit-max: 500%;
-ms-scroll-snap-type: proximity;
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-ms-overflow-style: none;
overflow: auto;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
--
总结:
① 一些功能仍待完善:比如,这里下拉自动回弹使用了动画,考虑释放后再回弹;
② componentWillReceiveProps 是经常使用的一个生命周期钩子,包括在参数路由改变时更新数据;