使用flatList做列表页上拉加载等多功能,主要使用以下两个属性:
onEndReached:当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
onEndReachedThreshold:决定当距离内容最底部还有多远时触发onEndReached回调。<font size=3 color=#D2691E>其值是表示百分比的数值。</font>
使用过程中遇到以下两个问题:
问题一: flatList初始化数据时首次请求的数据较少,flatList高度较小,多次触发onEndReached问题,直到请求的数据满足onEndReachedThreshold的设置。
通过设置FlatList的配置无法解决此问题。
情况一: 多页数据,设置每页请求数据数量可以铺满整屏
情况二: 当只有一页且数量较少时,通过设置特殊字段,退出onEndTouch回调。如下代码所示:
_onEndReached = () => {
const {isENd} = this.props //isEnd 表示当前是数据请求的最后一页
if(isENd) return;
...
};
问题二: flatList上拉刷新触发onEndTouch问题
解决方案: onScrollEndDrag 和 onMomentumScrollEnd 将标志字段置为false,退出onEndTouch回调,仅允许onScrollBeginDrag 和 onMomentumScrollBegin 情况正常调用onEndTouch回调。如下代码所示:
<FlatList
...
onEndReached={this._onEndReached}
onEndReachedThreshold={0.2}
onScrollBeginDrag={() => {
console.log('onScrollBeginDrag');
this.canAction = true;
}}
onScrollEndDrag={() => {
console.log('onScrollEndDrag');
this.canAction = false;
}}
onMomentumScrollBegin={() => {
console.log('onMomentumScrollBegin');
this.canAction = true;
}}
onMomentumScrollEnd={() => {
console.log('onMomentumScrollEnd');
this.canAction = false;
}}
/>
_onEndReached = () => {
console.log('_onEndReached');
if(!this.canAction) return;
...
};