一、基本布局
WechatIMG3.jpeg
二、实现
<ScrollView
style={styles.container}
onScroll={(e) => this._onScroll(e)}
refreshControl={
<RefreshControl
refreshing={false}
colors={['#ff0000', '#00ff00', '#0000ff']}
progressBackgroundColor={'#ffffff'}
onRefresh={this._onRefresh}
/>
}
>
<顶部卡片组件>
<表单列表组件>
map循环数据列表。。。
</表单列表组件>
</ScrollView>
js 滚动监听事件
_onScroll = (e) => {
const {topHeader} = this.state;
const {getListApi, pageNo, count} = this.props.platformStore;
let { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
let offsetY = contentOffset.y;
let contentSizeHeight = contentSize.height;
let oriageScrollHeight = layoutMeasurement.height;
if(offsetY + oriageScrollHeight >= contentSizeHeight){
console.log('触底了');
if(data.length < count){ // count后台数据返回的总条数
getListApi(pageNo, 10);
}
}
// 340 是顶部固定的高度 默认在顶部布局一个不显示的表头
if(!topHeader && offsetY > 340){
console.log('第一次触顶吸附');
this.setState({
topHeader: true,
});
} else if(topHeader && offsetY < 340){
// 已经是吸附状态
console.log('下拉放开吸附');
this.setState({
topHeader: false,
})
}
