基于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定义动画头部。

图一

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

图二

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

图三

4.界面组件的渲染


图四
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,747评论 25 709
  • 一、实验目的 学习使用 weka 中的常用分类器,完成数据分类任务。 二、实验内容 了解 weka 中 explo...
    yigoh阅读 8,660评论 5 4
  • 一、Android开发初体验 二、Android与MVC设计模式模型对象存储着应用的数据和业务逻辑。模型类通常用来...
    为梦想战斗阅读 950评论 0 3
  • 去仁恒接丽娜,两人去商都。 先吃甜品。 之后两人逛街,有家vintage风的店很不错。 lin果桑和蜜子接我们去拱...
    lisa全职吐槽阅读 313评论 0 0