Skip to content

Commit 0f41d4e

Browse files
李钿李钿
李钿
authored and
李钿
committed
1.0.0 变更临时代码
1 parent 3c5fc0f commit 0f41d4e

13 files changed

Lines changed: 738 additions & 283 deletions

‎demo/App.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ html,body{margin: 0; padding: 0;}
22
li{font-size: 20px; width: 100%;list-style: none;}
33
img{width: 100%;}
44
div, .test-ul, p{margin: 0; padding: 0;}
5-
.block{position: relative; top: 100px; height: 500px; overflow-y: scroll; -webkit-overflow-scrolling: touch;}
5+
.block{position: absolute; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch;}

‎demo/App.jsx‎

Lines changed: 110 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,87 @@
1-
import React, { Component, PropTypes } from 'react'
1+
import React, { Component, PureComponent, PropTypes } from 'react'
22
import { render } from 'react-dom'
3-
import ReactPullLoad from 'ReactPullLoad'
3+
// import ReactPullLoad from 'ReactPullLoad'
4+
import ReactPullLoad,{STATS} from 'index.js'
45
import './App.css'
56

7+
8+
const defaultStyle ={
9+
width: "100%",
10+
textAlign: "center",
11+
fontSize: "20px",
12+
lineHeight: "1.5"
13+
}
14+
15+
class HeadNode extends PureComponent{
16+
17+
static propTypes = {
18+
loaderState: PropTypes.string.isRequired,
19+
};
20+
21+
static defaultProps = {
22+
loaderState: STATS.init,
23+
};
24+
25+
render(){
26+
const {
27+
loaderState
28+
} = this.props
29+
30+
let content = ""
31+
if(loaderState == STATS.pulling){
32+
content = "下拉刷新"
33+
} else if(loaderState == STATS.enough){
34+
content = "松开刷新"
35+
} else if(loaderState == STATS.refreshing){
36+
content = "正在刷新..."
37+
} else if(loaderState == STATS.refreshed){
38+
content = "刷新成功"
39+
}
40+
41+
return(
42+
<div style={defaultStyle}>
43+
{content}
44+
</div>
45+
)
46+
}
47+
}
48+
49+
class FooterNode extends PureComponent{
50+
51+
static propTypes = {
52+
loaderState: PropTypes.string.isRequired,
53+
hasMore: PropTypes.bool.isRequired
54+
};
55+
56+
static defaultProps = {
57+
loaderState: STATS.init,
58+
hasMore: true
59+
};
60+
61+
render(){
62+
const {
63+
loaderState,
64+
hasMore
65+
} = this.props
66+
67+
let content = ""
68+
if(hasMore === false){
69+
content = "没有更多"
70+
} else if(loaderState == STATS.loading && hasMore === true){
71+
content = "加载中"
72+
}
73+
74+
return(
75+
<div style={defaultStyle}>
76+
{content}
77+
</div>
78+
)
79+
}
80+
}
81+
82+
83+
let index = 1;
84+
685
const cData = [
786
"http://img1.gtimg.com/15/1580/158031/15803178_1200x1000_0.jpg",
887
"http://img1.gtimg.com/15/1580/158031/15803179_1200x1000_0.jpg",
@@ -27,26 +106,47 @@ export class App extends Component{
27106
//刷新
28107
refresh(resolve, reject) {
29108
setTimeout(()=>{
109+
index = 1;
30110
this.setState({
31-
data: cData
111+
data: cData,
112+
hasMore: true
32113
});
33114
resolve();
34115
},3000)
35116
}
36117
//加载更多
37118
loadMore(resolve){
38-
setTimeout(()=>{
39-
this.setState({
40-
data: [...this.state.data, cData[0], cData[0]]
41-
});
42-
resolve();
43-
},3000)
119+
console.info(index);
120+
index++
121+
if(index < 3){
122+
setTimeout(()=>{
123+
this.setState({
124+
data: [...this.state.data, cData[0], cData[0]]
125+
});
126+
resolve();
127+
},3000)
128+
} else{
129+
setTimeout(()=>{
130+
this.setState({
131+
hasMore: false
132+
});
133+
resolve();
134+
},3000)
135+
}
44136
}
45137
render(){
46138
const {data, hasMore} = this.state
139+
console.info("hasMore = ",hasMore)
47140
return (
48141
<div>
49-
<ReactPullLoad downEnough={150} onRefresh={this.refresh.bind(this)} onLoadMore={this.loadMore.bind(this)} hasMore={hasMore}>
142+
<ReactPullLoad
143+
downEnough={150}
144+
onRefresh={this.refresh.bind(this)}
145+
onLoadMore={this.loadMore.bind(this)}
146+
hasMore={hasMore}
147+
HeadNode={HeadNode}
148+
FooterNode={FooterNode}
149+
distanceBottom={1000}>
50150
<ul className="test-ul">
51151
{
52152
data.map( (str, index )=>{

‎demo/App1.jsx‎

Lines changed: 127 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,87 @@
1-
import React, { Component, PropTypes } from 'react'
1+
2+
import React, { Component, PureComponent, PropTypes } from 'react'
23
import { render } from 'react-dom'
3-
import ReactPullLoad from 'ReactPullLoad'
4+
import ReactPullLoad,{STATS} from 'index.js'
45
import './App.css'
56

7+
8+
const defaultStyle ={
9+
width: "100%",
10+
textAlign: "center",
11+
fontSize: "20px",
12+
lineHeight: "1.5"
13+
}
14+
15+
class HeadNode extends PureComponent{
16+
17+
static propTypes = {
18+
loaderState: PropTypes.string.isRequired,
19+
};
20+
21+
static defaultProps = {
22+
loaderState: STATS.init,
23+
};
24+
25+
render(){
26+
const {
27+
loaderState
28+
} = this.props
29+
30+
let content = ""
31+
if(loaderState == STATS.pulling){
32+
content = "下拉刷新"
33+
} else if(loaderState == STATS.enough){
34+
content = "松开刷新"
35+
} else if(loaderState == STATS.refreshing){
36+
content = "正在刷新..."
37+
} else if(loaderState == STATS.refreshed){
38+
content = "刷新成功"
39+
}
40+
41+
return(
42+
<div style={defaultStyle}>
43+
{content}
44+
</div>
45+
)
46+
}
47+
}
48+
49+
class FooterNode extends PureComponent{
50+
51+
static propTypes = {
52+
loaderState: PropTypes.string.isRequired,
53+
hasMore: PropTypes.bool.isRequired
54+
};
55+
56+
static defaultProps = {
57+
loaderState: STATS.init,
58+
hasMore: true
59+
};
60+
61+
render(){
62+
const {
63+
loaderState,
64+
hasMore
65+
} = this.props
66+
67+
let content = ""
68+
if(hasMore === false){
69+
content = "没有更多"
70+
} else if(loaderState == STATS.loading && hasMore === true){
71+
content = "加载中"
72+
}
73+
74+
return(
75+
<div style={defaultStyle}>
76+
{content}
77+
</div>
78+
)
79+
}
80+
}
81+
82+
83+
let index = 1;
84+
685
const cData = [
786
"http://img1.gtimg.com/15/1580/158031/15803178_1200x1000_0.jpg",
887
"http://img1.gtimg.com/15/1580/158031/15803179_1200x1000_0.jpg",
@@ -21,45 +100,72 @@ export class App extends Component{
21100
this.refresh = this.refresh.bind(this);
22101
this.state ={
23102
hasMore: true,
24-
data: cData
103+
data: cData,
104+
action: STATS.init
25105
}
26106
}
27107
//刷新
28108
refresh(resolve, reject) {
29109
setTimeout(()=>{
110+
index = 1;
30111
this.setState({
31-
data: cData
112+
data: cData,
113+
hasMore: true,
114+
action: STATS.init
32115
});
33116
resolve();
34117
},3000)
35118
}
36119
//加载更多
37120
loadMore(resolve){
38-
setTimeout(()=>{
39-
this.setState({
40-
data: [...this.state.data, cData[0], cData[0]]
41-
});
42-
resolve();
43-
},3000)
121+
console.info(index);
122+
index++
123+
if(index < 3){
124+
setTimeout(()=>{
125+
this.setState({
126+
data: [...this.state.data, cData[0], cData[0]],
127+
action: STATS.init
128+
});
129+
resolve();
130+
},3000)
131+
} else{
132+
setTimeout(()=>{
133+
this.setState({
134+
hasMore: false,
135+
action: STATS.init
136+
});
137+
resolve();
138+
},3000)
139+
}
44140
}
45141
render(){
46142
const {data, hasMore} = this.state
143+
console.info("hasMore = ",hasMore)
47144
return (
48145
<div>
49146
<ReactPullLoad
50147
className="block"
51-
style={{top:"200px"}}
52148
isBlockContainer={true}
53-
onRefresh={this.refresh.bind(this)}
54-
onLoadMore={this.loadMore.bind(this)}
55-
hasMore={hasMore}>
56-
<ul className="test-ul">
57-
{
58-
data.map( (str, index )=>{
59-
return <li key={index}><img src={str} alt=""/></li>
60-
})
61-
}
62-
</ul>
149+
downEnough={150}
150+
action={this.state.action}
151+
onRefresh={this.refresh.bind(this)}
152+
onLoadMore={this.loadMore.bind(this)}
153+
hasMore={hasMore}
154+
HeadNode={HeadNode}
155+
FooterNode={FooterNode}
156+
distanceBottom={1000}>
157+
<ul className="test-ul">
158+
<button onClick={() =>{
159+
this.setState({
160+
action: STATS.refreshing
161+
})
162+
}}>refreshing</button>
163+
{
164+
data.map( (str, index )=>{
165+
return <li key={index}><img src={str} alt=""/></li>
166+
})
167+
}
168+
</ul>
63169
</ReactPullLoad>
64170
</div>
65171
)

‎dist/bundle1.js‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/bundle2.js‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
bundle1.js is demo use document as contianer
1212
bundle2.js is demo use ReactPullLoad root DOM as contianer
1313
-->
14-
<!--<script type="text/javascript" src="bundle1.js?59ea2a965138b99452db"></script>-->
15-
<script type="text/javascript" src="bundle2.js?2a9f52bcc133f970ade0"></script>
14+
<script type="text/javascript" src="bundle1.js?4968fc9b300e76e95caa"></script>
1615
</body>
1716
</html>

‎src/FooterNode.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
import React, { PureComponent, PropTypes } from 'react'
3+
import { STATS } from 'constants'
4+
5+
export default class FooterNode extends PureComponent{
6+
7+
static propTypes = {
8+
loaderState: PropTypes.string.isRequired,
9+
hasMore: PropTypes.bool.isRequired
10+
};
11+
12+
static defaultProps = {
13+
loaderState: STATS.init,
14+
hasMore: true
15+
};
16+
17+
render(){
18+
const {
19+
loaderState,
20+
hasMore
21+
} = this.props
22+
23+
let className = `pull-load-footer-default ${hasMore? "" : "nomore"}`
24+
25+
return(
26+
<div className={className}>
27+
<i/>
28+
</div>
29+
)
30+
}
31+
}

0 commit comments

Comments
 (0)