npm install --save react-pullload1.  
import ReactPullLoad,{ STATS } from 'react-pullload'
2.   
3.  
export class App extends Component{
4.  
constructor(){
5.  
super();
6.  
this.state ={
7.  
hasMore: true,
8.  
data: cData,
9.  
action: STATS.init,
10.  
index: loadMoreLimitNum //loading more test time limit
11.  
}
12.  
}
13.   
14.  
handleAction = (action) => {
15.  
console.info(action, this.state.action,action === this.state.action);
16.  
//new action must do not equel to old action
17.  
if(action === this.state.action){
18.  
return false
19.  
}
20.   
21.  
if(action === STATS.refreshing){//刷新
22.  
this.handRefreshing();
23.  
} else if(action === STATS.loading){//加載更多
24.  
this.handLoadMore();
25.  
} else{
26.  
//DO NOT modify below code
27.  
this.setState({
28.  
action: action
29.  
})
30.  
}
31.  
}
32.   
33.  
handRefreshing = () =>{
34.  
if(STATS.refreshing === this.state.action){
35.  
return false
36.  
}
37.   
38.  
setTimeout(()=>{
39.  
//refreshing complete
40.  
this.setState({
41.  
data: cData,
42.  
hasMore: true,
43.  
action: STATS.refreshed,
44.  
index: loadMoreLimitNum
45.  
});
46.  
}, 3000)
47.   
48.  
this.setState({
49.  
action: STATS.refreshing
50.  
})
51.  
}
52.   
53.  
handLoadMore = () => {
54.  
if(STATS.loading === this.state.action){
55.  
return false
56.  
}
57.   
58.  
setTimeout(()=>{
59.  
if(this.state.index === 0){
60.  
this.setState({
61.  
action: STATS.reset,
62.  
hasMore: false
63.  
});
64.  
} else{
65.  
this.setState({
66.  
data: [...this.state.data, cData[0], cData[0]],
67.  
action: STATS.reset,
68.  
index: this.state.index - 1
69.  
});
70.  
}
71.  
}, 3000)
72.   
73.  
this.setState({
74.  
action: STATS.loading
75.  
})
76.  
}
77.   
78.  
render(){
79.  
const {
80.  
data,
81.  
hasMore
82.  
} = this.state
83.   
84.  
const fixHeaderStyle = {
85.  
position: "fixed",
86.  
width: "100%",
87.  
height: "50px",
88.  
color: "#fff",
89.  
lineHeight: "50px",
90.  
backgroundColor: "#e24f37",
91.  
left: 0,
92.  
top: 0,
93.  
textAlign: "center",
94.  
zIndex: 1
95.  
}
96.   
97.  
return (
98.  
<div>
99.  
<div style={fixHeaderStyle}>
100.  
fixed header
101.  
</div>
102.  
<ReactPullLoad 
103.  
downEnough={150}
104.  
action={this.state.action}
105.  
handleAction={this.handleAction}
106.  
hasMore={hasMore}
107.  
style={{paddingTop: 50}}
108.  
distanceBottom={1000}>
109.  
<ul className="test-ul">
110.  
<button onClick={this.handRefreshing}>refreshing</button>
111.  
<button onClick={this.handLoadMore}>loading more</button>
112.  
{
113.  
data.map( (str, index )=>{
114.  
return <li key={index}><img src={str} alt=""/></li>
115.  
})
116.  
}
117.  
</ul>
118.  
</ReactPullLoad>
119.  
</div>
120.  
)
121.  
}
122.  
}