1.0.1 • Published 4 years ago
rax-refreshcontrol v1.0.1
描述: 滚动容器的下拉刷新功能
支持
仅WEEX
安装
$ npm install rax-refreshcontrol --save
引用
import RefreshControl from 'rax-refreshcontrol';
属性
注: 1、支持列表中的 代表h5 代表weex 代表小程序
属性 | 类型 | 默认值 | 必填 | 描述 | 支持 |
---|---|---|---|---|---|
refreshing | string | - | false | 是否显示 | |
onRefresh | function | - | false | 监听下拉刷新的行为 | |
onPullingdown | function | - | false | 监听下拉事件 |
示例
import {createElement, Component, render} from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import DU from 'driver-universal';
import RecyclerView from 'rax-recyclerview';
import RefreshControl from 'rax-refreshcontrol';
let arrayFrom = function(arrayLike /*, mapFn, thisArg */) {
if (arrayLike == null) {
throw new TypeError('Object is null or undefined');
}
// Optional args.
var mapFn = arguments[1];
var thisArg = arguments[2];
var C = this;
var items = Object(arrayLike);
var symbolIterator = typeof Symbol === 'function'
? Symbol.iterator
: '@@iterator';
var mapping = typeof mapFn === 'function';
var usingIterator = typeof items[symbolIterator] === 'function';
var key = 0;
var ret;
var value;
if (usingIterator) {
ret = typeof C === 'function'
? new C()
: [];
var it = items[symbolIterator]();
var next;
while (!(next = it.next()).done) {
value = next.value;
if (mapping) {
value = mapFn.call(thisArg, value, key);
}
ret[key] = value;
key += 1;
}
ret.length = key;
return ret;
}
var len = items.length;
if (isNaN(len) || len < 0) {
len = 0;
}
ret = typeof C === 'function'
? new C(len)
: new Array(len);
while (key < len) {
value = items[key];
if (mapping) {
value = mapFn.call(thisArg, value, key);
}
ret[key] = value;
key += 1;
}
ret.length = key;
return ret;
};
class Row extends Component {
handleClick = (e) => {
this.props.onClick(this.props.data);
};
render() {
return (
<View onPress={this.handleClick} >
<View style={styles.row}>
<Text style={styles.text}>
{this.props.data.text + ' (' + this.props.data.clicks + ' clicks)'}
</Text>
</View>
</View>
);
}
}
class RefreshControlDemo extends Component {
state = {
isRefreshing: false,
loaded: 0,
refreshText: '↓ Pull To Refresh',
rowData: arrayFrom(new Array(20)).map(
(val, i) => ({text: 'Initial row ' + i, clicks: 0})),
};
handleClick = (row) => {
row.clicks++;
this.setState({
rowData: this.state.rowData,
});
};
handleRefresh = (e) => {
this.setState({
isRefreshing: true,
refreshText: 'Refreshing',
});
setTimeout(() => {
// prepend 10 items
const rowData = arrayFrom(new Array(10))
.map((val, i) => ({
text: 'Loaded row ' + (+this.state.loaded + i),
clicks: 0,
}))
.concat(this.state.rowData);
this.setState({
loaded: this.state.loaded + 10,
isRefreshing: false,
rowData: rowData,
refreshText: '↓ Pull To Refresh',
});
}, 1000);
};
render() {
const rows = this.state.rowData.map((row, ii) => {
return (<RecyclerView.Cell>
<Row key={ii} data={row} onClick={this.handleClick}/>
</RecyclerView.Cell>);
});
return (
<View style={styles.container}>
<RecyclerView
refreshControl={null}>
<RefreshControl
style={styles.refreshView}
refreshing={this.state.isRefreshing}
onRefresh={this.handleRefresh}
>
<Text>{this.state.refreshText}</Text>
</RefreshControl>
{rows}
</RecyclerView>
</View>
);
}
}
const styles = {
container: {
padding: 20,
borderStyle: 'solid',
borderColor: '#dddddd',
borderWidth: 1,
marginLeft: 20,
marginRight: 20,
marginBottom: 10,
flex: 1
},
button: {
margin: 7,
padding: 5,
alignItems: 'center',
backgroundColor: '#eaeaea',
borderRadius: 3,
},
box: {
width: 64,
height: 64,
},
eventLogBox: {
padding: 10,
margin: 10,
height: 80,
borderWidth: 1,
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
},
row: {
borderColor: 'grey',
borderWidth: 1,
padding: 20,
margin: 5,
},
text: {
alignSelf: 'center',
color: 'black',
},
refreshView: {
height: 80,
width: 750,
justifyContent: 'center',
alignItems: 'center'
},
refreshArrow: {
fontSize: 30,
color: '#45b5f0'
},
};
render(<RefreshControlDemo/>, document.body, { driver: DU });
1.0.1
4 years ago
1.0.0
5 years ago
1.0.0-beta.3
5 years ago
1.0.0-beta.2
5 years ago
1.0.0-beta.1
5 years ago
1.0.0-beta.0
5 years ago
0.6.5
6 years ago
0.6.4
6 years ago
0.6.3
7 years ago
0.6.2
7 years ago
0.6.1
7 years ago
0.6.0
7 years ago
0.5.4
7 years ago
0.5.2
7 years ago
0.5.1
7 years ago
0.5.0
7 years ago
0.4.20
7 years ago
0.4.19
7 years ago
0.4.18
7 years ago
0.4.17
7 years ago
0.4.16
7 years ago
0.4.15
7 years ago
0.5.0-beta
7 years ago
0.4.14
7 years ago
0.4.13
7 years ago
0.4.12
7 years ago
0.4.11
7 years ago
0.4.10
7 years ago
0.4.9
7 years ago
0.4.8
7 years ago
0.4.7
7 years ago
0.4.6
7 years ago
0.4.5
7 years ago
0.4.4
7 years ago
0.4.3
7 years ago
0.4.2
7 years ago
0.4.1
7 years ago
0.4.0
7 years ago
0.3.8
7 years ago
0.3.7
7 years ago
0.3.6
7 years ago
0.3.5
8 years ago
0.3.4
8 years ago
0.3.3
8 years ago
0.3.2
8 years ago
0.3.1
8 years ago
0.3.0
8 years ago
0.2.11
8 years ago
0.2.10
8 years ago
0.2.9
8 years ago
0.2.8
8 years ago
0.2.7
8 years ago
0.2.6
8 years ago
0.2.5
8 years ago
0.2.4
8 years ago
0.2.3
8 years ago
0.2.2
8 years ago
0.2.1
8 years ago
0.2.0
8 years ago