Skip to content

Commit de08747

Browse files
staticdengstaticdeng
committed
add README.md in English
1 parent ed8002f commit de08747

File tree

2 files changed

+191
-11
lines changed

2 files changed

+191
-11
lines changed

‎README.md

Lines changed: 161 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,162 @@
11
# vuejs-loadmore
2-
A pull-down refresh and pull-up loadmore scroll component for Vue.js. Vue上拉加载下拉刷新的组件.
2+
[![Build Status](https://img.shields.io/github/workflow/status/staticdeng/vuejs-loadmore/Node.js%20CI)](https://github.com/staticdeng/vuejs-loadmore/actions)
3+
4+
A pull-down refresh and pull-up loadmore scroll component for Vue.js.
5+
6+
Easy to use by providing simple api. Unlike other component libraries, it uses the browser itself to scroll instead of js, so it has a smaller code size but does not lose the user experience.
7+
8+
## Preview
9+
[Online demo](https://staticdeng.github.io/vuejs-loadmore/)
10+
11+
You can also scan the following QR code to access the demo：
12+
13+
<img src="https://user-images.githubusercontent.com/20060839/145163261-02025f86-ac87-4016-859f-15677a6d3cf7.png" width="220" height="220" >
14+
15+
## Installation
16+
17+
#### Install the npm package
18+
19+
```bash
20+
# npm
21+
npm install vuejs-loadmore --save
22+
```
23+
24+
#### Import
25+
26+
```js
27+
import Vue from 'vue';
28+
import VueLoadmore from 'vuejs-loadmore';
29+
30+
Vue.use(VueLoadmore);
31+
```
32+
33+
## Usage
34+
35+
### Basic Usage
36+
37+
```html
38+
<vue-loadmore
39+
:on-refresh="onRefresh"
40+
:on-loadmore="onLoad"
41+
:finished="finished">
42+
<div v-for="(item, i) of list" :key="i"></div>
43+
</vue-loadmore>
44+
```
45+
The `on-refresh` and `on-loadmore` will be Emitted when pull refresh or scroll to the bottom, you should need to execute the callback function `done()` after processing the data request.
46+
47+
If you don't need refresh, only not to bind `on-refresh`.
48+
49+
When the data request is completed, the data `finished` needs to be changed to true.
50+
51+
```js
52+
export default {
53+
data() {
54+
return {
55+
list: [],
56+
page: 1,
57+
pageSize: 10,
58+
finished: false
59+
};
60+
},
61+
methods: {
62+
onRefresh(done) {
63+
this.list = [];
64+
this.page = 1;
65+
this.finished = false;
66+
this.fetch();
67+
68+
done();
69+
},
70+
71+
onLoad(done) {
72+
if (this.page <= 10) {
73+
this.fetch();
74+
} else {
75+
// all data loaded
76+
this.finished = true;
77+
}
78+
done();
79+
},
80+
81+
fetch() {
82+
for (let i = 0; i < this.pageSize; i++) {
83+
this.list.push(this.list.length + 1);
84+
}
85+
this.page++;
86+
}
87+
},
88+
}
89+
```
90+
91+
### Load Error Info
92+
93+
```html
94+
<vue-loadmore
95+
:on-loadmore="onLoad"
96+
:finished="finished"
97+
:error.sync="error">
98+
<div v-for="(item, i) of list" :key="i"></div>
99+
</vue-loadmore>
100+
```
101+
102+
```js
103+
export default {
104+
data() {
105+
return {
106+
list: [],
107+
finished: false,
108+
error: false,
109+
};
110+
},
111+
methods: {
112+
onLoad() {
113+
fetchSomeThing().catch(() => {
114+
this.error = true;
115+
});
116+
},
117+
},
118+
};
119+
```
120+
121+
## API
122+
123+
### Props
124+
125+
| Attribute | Description | Type | Default |
126+
| --- | --- | --- | --- |
127+
| on-refresh | Will be Emitted when pull refresh | _function_ | - |
128+
| pulling-text | The Text when pulling in refresh | _string_ | `下拉刷新` |
129+
| loosing-text | The Text when loosing in refresh | _string_ | `释放刷新` |
130+
| loading-text | The Text when loading in refresh | _string_ | `正在刷新` |
131+
| success-text | The Text when loading success in refresh | _string_ | `刷新完成` |
132+
| show-success-text | Whether to show `success-text` | _boolean_ | `true` |
133+
| pull-distance | The distance to trigger the refresh status | _number \| string_ | `50` |
134+
| head-height | The height of the area of the refresh shows | _number \| string_ | `50` |
135+
| animation-duration | Animation duration of the refresh | _number \| string_ | `200` |
136+
| on-loadmore | Will be Emitted when scroll to the bottom | _function_ | - |
137+
| immediate-check | Whether to check loadmore position immediately after mounted | _boolean_ | `true` |
138+
| load-offset | The `on-loadmore` will be Emitted when the distance from the scroll bar to the bottom is less than the `load-offset` | _number \| string_ | `50` |
139+
| finished | Whether the data is loaded | _boolean_ | `false` |
140+
| error | Whether the data is loaded, the `on-loadmore` will be Emitted only when error text clicked, the `sync` modifier is needed | _boolean_ | `false` |
141+
| loading-text | The Text when loading in loaded | _string_ | `正在加载` |
142+
| finished-text | The Text when the data is loaded | _string_ | `没有更多了` |
143+
| error-text | The Text when error loaded | _string_ | `请求失败，点击重新加载` |
144+
145+
### Methods
146+
147+
Use ref to get List instance and call instance methods.
148+
149+
| Name | Description | Attribute | Return value |
150+
| ----- | --------------------- | --------- | ------------ |
151+
| checkScroll | Check scroll position | - | - |
152+
153+
154+
## Example
155+
156+
You can see the demo for quickly understand how to use this package.
157+
158+
```bash
159+
git clone git@github.com:staticdeng/vuejs-loadmore.git
160+
yarn install
161+
yarn example:dev
162+
```

‎example/src/App.vue

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
:on-loadmore="onLoad"
1111
:finished="finished"
1212
:error.sync="error"
13+
ref="loadmoreRef"
1314
>
1415
<ul class="list-ul">
1516
<li class="list-li" v-for="(item, index) of list" :key="item">{{ language === 'Chinese' ? '测试数据' : 'This is data' }} {{ index + 1 }}</li>
@@ -30,32 +31,51 @@ export default {
3031
data() {
3132
return {
3233
list: [],
33-
loading: false,
34+
page: 1,
3435
finished: false,
3536
error: false,
3637
language: 'Chinese'
3738
};
3839
},
3940
methods: {
41+
initData() {
42+
this.list = [];
43+
this.page = 1;
44+
this.finished = false;
45+
this.error = false;
46+
},
4047
onRefresh(done) {
48+
this.initData();
49+
this.fetch();
50+
4151
done();
52+
// 如果请求数据撑不起整个页面，可以手动调用checkSroll
53+
setTimeout(() => {
54+
this.$refs.loadmoreRef.checkSroll();
55+
}, 1500);
4256
},
4357
4458
onLoad(done) {
45-
for (let i = 0; i < 10; i++) {
46-
this.list.push(this.list.length + 1);
59+
if (this.page <= 10) {
60+
this.fetch();
61+
} else {
62+
// all data loaded
63+
this.finished = true;
4764
}
48-
49-
if (this.list.length == 30) {
65+
if (this.page === 3) {
5066
this.error = true;
5167
}
52-
// 数据全部加载完成
53-
if (this.list.length >= 100) {
54-
this.finished = true;
55-
}
5668
5769
done();
5870
},
71+
72+
fetch() {
73+
for (let i = 0; i < 10; i++) {
74+
this.list.push(this.list.length + 1);
75+
}
76+
this.page++;
77+
},
78+
5979
changeLanguage() {
6080
this.language = this.language === 'Chinese' ? 'English' : 'Chinese';
6181
}
@@ -76,7 +96,7 @@ export default {
7696
// height: 500px;
7797
}
7898
.loadmore-head {
79-
position: absolute;
99+
position: fixed;
80100
top: 0;
81101
right: 0;
82102
left: 0;

0 commit comments

Comments
 (0)