基于List View的下拉刷新和上拉加载更多

1.同pull View一样,有下拉刷新效果,只不过pullView是基于ScrollView来实现的下拉,而Pull List则是基于List View来实现的。

2.引入pull List

import {PullList} from 'react-native-pull';

3.如下图:初始化List,并注册所需要的事件,这些事件分别是:

onPulling: 处于pulling状态时执行的方法

onPullOk: 处于pullok状态时执行的方法

onPullRelease: 处于pullrelease状态时执行的方法,接受一个参数:resolve,最后执行完操作后应该调用resolve()。

onPushing: 当从下往上推时执行的方法,接受一个参数:gesturePosition。gesturePosition是json格式{x, y}对象,当从上往下拉时gesturePosition.y > 0,当从下往上推时gesturePosition.y < 0。

topIndicatorRender: 顶部刷新指示组件的渲染方法, 接受4个参数: ispulling, ispullok, ispullrelease,gesturePosition,你可以使用gesturePosition定义动画头部。

基于List View的下拉刷新和上拉加载更多_第1张图片
图一

onPullRelease定义下拉的事件,topIndicator里面定义三个下来状态,可以自定义这三种状态的样式,

基于List View的下拉刷新和上拉加载更多_第2张图片
图二

renderFooter,用来渲染底部加载更多时的样式,loadmore用来定义加载更多的动作,pressRow用来响应,点击列表某行时,会触发的动作。

基于List View的下拉刷新和上拉加载更多_第3张图片
图三

4.界面组件的渲染


基于List View的下拉刷新和上拉加载更多_第4张图片
图四

你可能感兴趣的:(基于List View的下拉刷新和上拉加载更多)