React Native中的RefreshContorl下拉刷新使用
我们知道App中都有下拉加载,在React Native中也有类似的控件
一、属性方法
(1) onRefresh function 在视图开始刷新的时候调用
(2) refreshing bool 视图是否在刷新时显示指示器,也表明当前是否在刷新中
(3) colors [ColorPropType] android平台适用 进行设置加载进去指示器的颜色,至少设置一种,最多可以设置4种
(4) enabled bool android平台适用 用来设置下拉刷新功能是否可用
(5) progressBackgroundColor ColorPropType 设置加载进度指示器的背景颜色
(6) size RefreshLayoutConsts.SIZE.DEFAULT android平台适用 加载进度指示器的尺寸大小
(7) tintColor ColorPropType iOS平台适用 设置加载进度指示器的颜色
(8)title string iOS平台适用 设置加载进度指示器下面的标题文本信息
二、使用方法
<ScrollView refreshControl={ <RefreshControl refreshing={this.state.isRefreshing} onRefresh={this._onRefresh} tintColor="#ff0000" title="Loading..." titleColor="#00ff00" colors={['#ff0000', '#00ff00', '#0000ff']} progressBackgroundColor="#ffff00" /> } /> _onRefresh() { this.setState({ isRefreshing:true }); var self = this; setTimeout(()=>{ //加载数据 },2000) }
这样就出现加载效果了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
react-native ListView下拉刷新上拉加载实现代码
本文介绍了react-native ListView下拉刷新上拉加载实现.分享给大家,具体如下: 先看效果图 下拉刷新 React Native提供了一个组件可以实现下拉刷新方法RefreshControl 使用方法 <ListView refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } //... </List
-
React Native仿美团下拉菜单的实例代码
本文介绍了React Native仿美团下拉菜单的实例代码,最近也在学习React Native,顺便分享给大家 在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可.如果使用React Native开发上面的效果,需要注意几个问题: 1. 在下拉的时候有动画过度效果: 2.下拉菜单出现后点击菜单项,菜单项可选择,并触发对应的事件: 3.下拉菜单中的项目可以配置: 要实现弹框效果,我们马上回想到使用Mo
-
React Native中的RefreshContorl下拉刷新使用
我们知道App中都有下拉加载,在React Native中也有类似的控件 一.属性方法 (1) onRefresh function 在视图开始刷新的时候调用 (2) refreshing bool 视图是否在刷新时显示指示器,也表明当前是否在刷新中 (3) colors [ColorPropType] android平台适用 进行设置加载进去指示器的颜色,至少设置一种,最多可以设置4种 (4) enabled bool android平台适用 用来设置下拉刷新功能是否可用 (5) progre
-
React native ListView 增加顶部下拉刷新和底下点击刷新示例
1. 底部点击刷新 1.1 先增加一个按钮 render() { if(!this.state.data){ return( <Text>Loading... </Text> ) }else{ return( <ListView refreshControl={ <RefreshControl refreshing = {false} onRefresh = {this.reloadWordData.bind(this)} /> } dataSource={thi
-
Ionic如何实现下拉刷新与上拉加载功能
IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用.提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择.Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架.Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程
-
超好看的下拉刷新动画Android代码实现
最近看到了好多高端.大气.上档次的动画效果,如果给你的项目中加上这些动画,相信你的app一定很优秀,今天给大家分析一下来自Yalantis的一个超好看的下拉刷新动画. 首先我们看一下效果如何: 怎么样?是不是很高大上?接下来我们看一下代码: 一.首先我们需要自定义刷新的动态RefreshView(也就是下拉时候的头) 1.初始化头所占用的Dimens private void initiateDimens() { mScreenWidth = mContext.getResources().ge
-
Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能(附源码)
最近项目中需要用到ListView下拉刷新的功能,一开始想图省事,在网上直接找一个现成的,可是尝试了网上多个版本的下拉刷新之后发现效果都不怎么理想.有些是因为功能不完整或有Bug,有些是因为使用起来太复杂,十全十美的还真没找到.因此我也是放弃了在网上找现成代码的想法,自己花功夫编写了一种非常简单的下拉刷新实现方案,现在拿出来和大家分享一下.相信在阅读完本篇文章之后,大家都可以在自己的项目中一分钟引入下拉刷新功能. 首先讲一下实现原理.这里我们将采取的方案是使用组合View的方式,先自定义一个布局
-
安卓(android)怎么实现下拉刷新
这里我们将采取的方案是使用组合View的方式,先自定义一个布局继承自LinearLayout,然后在这个布局中加入下拉头和ListView这两个子元素,并让这两个子元素纵向排列.初始化的时候,让下拉头向上偏移出屏幕,这样我们看到的就只有ListView了.然后对ListView的touch事件进行监听,如果当前ListView已经滚动到顶部并且手指还在向下拉的话,那就将下拉头显示出来,松手后进行刷新操作,并将下拉头隐藏.那我们现在就来动手实现一下,新建一个项目起名叫PullToRefreshTe
-
微信小程序下拉刷新PullDownRefresh的使用方法
前言 下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法 onPullDownRefresh .虽然微信的官方文档有很多坑,但下拉刷新介绍的还是很全面的. 微信小程序--下拉刷新.jpg 最近开发一款微信小程序,里面有用到下拉刷新数据的功能.于是,又开始折腾了... 一.onPullDownRefresh回调 初略看了下文档,发现小程序js中有onPullDownRefresh回调,果断重写之... // http://itlao5.com onPullDownRe
-
微信小程序实现页面下拉刷新和上拉加载功能详解
本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能.分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能. 微信小程序中如何实现下拉刷新,上拉加载的功能. 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示. 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示 效果图: 实现代码: Water
-
vue移动端下拉刷新和上拉加载的实现代码
由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新DropDownRefresh.vue <template lang="html"> <div class="refreshMoudle" @touchstart="touchStart($event)" @touchmove="
-
React Native 自定义下拉刷新上拉加载的列表的示例
在移动端开发中列表页是非常常见的页面,在React Native中我们一般使用FlatList或SectionList组件实现这些列表视图.通常列表页都会有大量的数据需要加载显示,这时候就用到了分页加载,因此对于列表组件来说,实现下拉刷新和上拉加载在很多情况下是必不可少的. 本篇文章基于FlatList封装一个支持下拉刷新和上拉加载的RefreshListView,对原始的FlatList进行封装之后,再调用上拉和下拉刷新就十分方便了. 下拉刷新的实现十分简单,这里我们沿用FlatList本身的
随机推荐
- 在Django框架中自定义模板过滤器的方法
- C#利用ReportViewer生成报表
- Java多线程基本用法总结
- 使用scrollTop()解决IOS中输入法遮挡输入框问题
- [图]Flash+ASP实现电子互动地图在线标注功能
- Android编程之通知栏的用法小结
- 优化php效率,提高php性能的一些方法
- JS控制日期显示的小例子
- jquery图片延迟加载 前端开发技能必备系列
- javascript分页代码实例分享(js分页)
- Windows nginx安装教程及简单实践
- python各种语言间时间的转化实现代码
- C# SendMail发送邮件功能实现
- Vue头像处理方案小结
- Java吃货联盟订餐系统代码实例
- WxPython建立批量录入框窗口
- python制作英语翻译小工具代码实例
- layui 数据表格复选框实现单选功能的例子
- php策略模式简单示例分析【区别于工厂模式】
- python requests抓取one推送文字和图片代码实例