Skip to content

Commit 528c583

Browse files
李钿李钿
李钿
authored and
李钿
committed
增加禁用下拉刷新例子
1 parent dcffe6e commit 528c583

File tree

1 file changed

+141
-0
lines changed

1 file changed

+141
-0
lines changed

demo/App3.jsx

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
2+
import React, { Component, PureComponent, PropTypes } from 'react'
3+
import { render } from 'react-dom'
4+
import ReactPullLoad,{STATS} from 'index.js'
5+
import './App.css'
6+
7+
8+
const defaultStyle ={
9+
width: "100%",
10+
textAlign: "center",
11+
fontSize: "20px",
12+
lineHeight: "1.5"
13+
}
14+
15+
const loadMoreLimitNum = 2;
16+
17+
const cData = [
18+
"http://img1.gtimg.com/15/1580/158031/15803178_1200x1000_0.jpg",
19+
"http://img1.gtimg.com/15/1580/158031/15803179_1200x1000_0.jpg",
20+
"http://img1.gtimg.com/15/1580/158031/15803181_1200x1000_0.jpg",
21+
"http://img1.gtimg.com/15/1580/158031/15803182_1200x1000_0.jpg",
22+
"http://img1.gtimg.com/15/1580/158031/15803183_1200x1000_0.jpg",
23+
// "http://img1.gtimg.com/15/1580/158031/15803184_1200x1000_0.jpg",
24+
// "http://img1.gtimg.com/15/1580/158031/15803186_1200x1000_0.jpg"
25+
]
26+
27+
export class App extends Component{
28+
constructor(){
29+
super();
30+
this.state ={
31+
hasMore: true,
32+
data: cData,
33+
action: STATS.init,
34+
index: loadMoreLimitNum //loading more test time limit
35+
}
36+
}
37+
38+
handleAction = (action) => {
39+
console.info(action, this.state.action,action === this.state.action);
40+
if(action !== STATS.loading){
41+
return false;
42+
}
43+
44+
this.setState({
45+
hasMore: true
46+
});
47+
setTimeout(()=>{
48+
if(this.state.index === 0){
49+
this.setState({
50+
action: STATS.reset,
51+
hasMore: false
52+
});
53+
} else{
54+
this.setState({
55+
data: [...this.state.data, cData[0], cData[0]],
56+
action: STATS.reset,
57+
index: this.state.index - 1
58+
});
59+
}
60+
}, 3000)
61+
62+
//DO NOT modify below code
63+
this.setState({
64+
action: action
65+
})
66+
}
67+
68+
getScrollTop = ()=>{
69+
if(this.refs.reactpullload){
70+
console.info(this.refs.reactpullload.getScrollTop());
71+
}
72+
}
73+
setScrollTop = ()=>{
74+
if(this.refs.reactpullload){
75+
console.info(this.refs.reactpullload.setScrollTop(100));
76+
}
77+
}
78+
79+
render(){
80+
const {
81+
data,
82+
hasMore
83+
} = this.state
84+
85+
const fixHeaderStyle = {
86+
position: "fixed",
87+
width: "100%",
88+
height: "50px",
89+
color: "#fff",
90+
lineHeight: "50px",
91+
backgroundColor: "#e24f37",
92+
left: 0,
93+
top: 0,
94+
textAlign: "center",
95+
zIndex: 1
96+
}
97+
98+
const fixButtonStyle = {
99+
position: "fixed",
100+
top: 200,
101+
width: "100%",
102+
}
103+
104+
return (
105+
<div>
106+
<div style={fixHeaderStyle}>
107+
fixed header
108+
</div>
109+
<ReactPullLoad
110+
downEnough={150}
111+
ref="reactpullload"
112+
className="block"
113+
isBlockContainer={true}
114+
action={this.state.action}
115+
handleAction={this.handleAction}
116+
hasMore={hasMore}
117+
style={{paddingTop: 50}}
118+
distanceBottom={1000}>
119+
<ul className="test-ul">
120+
<button onClick={this.handleAction.bind(this, STATS.refreshing)}>refreshing</button>
121+
<button onClick={this.handleAction.bind(this, STATS.loading)}>loading more</button>
122+
<div style={fixButtonStyle}>
123+
<button onClick={this.getScrollTop}>getScrollTop</button>
124+
<button onClick={this.setScrollTop}>setScrollTop</button>
125+
</div>
126+
{
127+
data.map( (str, index )=>{
128+
return <li key={index}><img src={str} alt=""/></li>
129+
})
130+
}
131+
</ul>
132+
</ReactPullLoad>
133+
</div>
134+
)
135+
}
136+
}
137+
138+
render(
139+
<App />,
140+
document.getElementById('root')
141+
)

0 commit comments

Comments
 (0)