React Native中的RefreshContorl下拉刷新使用


Posted in Javascript onOctober 09, 2017

我们知道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)
}

这样就出现加载效果了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
JS实现的全排列组合算法示例
Oct 09 #Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 #Javascript
jQuery ajax调用webservice注意事项
Oct 08 #jQuery
js用类封装pop弹窗组件
Oct 08 #Javascript
利用js编写网页进度条效果
Oct 08 #Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 #Javascript
JS动态修改网页body的背景色实例代码
Oct 07 #Javascript
You might like
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
javascript Object与Function使用
2010/01/11 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
python缩进区别分析
2014/02/15 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
写给女生的道歉信
2014/01/08 职场文书
初中英语教学反思
2014/01/25 职场文书
挂职自我鉴定
2014/02/26 职场文书
保密承诺书
2014/03/27 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
总结Python使用过程中的bug
2021/06/18 Python