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(()=>{
//加载html" target="_blank">数据
},2000)
}
这样就出现加载效果了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
下拉刷新是一个特别的组件，可以用来初始化页面内容的刷新。 下拉刷新的demo <header class="bar bar-nav"> <h1 class='title'>下拉刷新</h1> </header> <!-- content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 --> <div class="content pull-to-re
-
下拉刷新是一个特别的组件，可以用来初始化页面内容的刷新。 下拉刷新的HTML布局结构 让我们来看一下如何把下拉刷新组件集成到页面中： <div class="page"> <!-- Page content应该拥有"pull-to-refresh-content"类 --> <div class="page-content pull-to-refresh-content" data-ptr
-
Page.onPullDownRefresh() 在 Page 中定义 onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件 jd.startPullDownRefresh(Object object) 开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致 OBJECT 参数说明： 参数 类型 必填 说明 success Function 否 接口调用成功的回调函数
-
主要内容：实例在加载新数据的时候，我们需要实现下拉刷新效果，代码如下： 实例 HTML 代码 JavaScript 代码 item.json 文件数据： 尝试一下 » 效果如下所示：
-
介绍 用于提供下拉刷新的交互操作。 引入 import { createApp } from 'vue'; import { PullRefresh } from 'vant'; const app = createApp(); app.use(PullRefresh); 代码演示 基础用法 下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 v-m
-
在加载新数据的时候，我们需要实现下拉刷新效果，代码如下： 实例 HTML 代码 <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <ion-refresher pulling-text="下拉刷新" on-refresh="doRefr