Skip to content

Commit 6c55bff

Browse files
committed
Improve import and usage guide
1 parent 44287ae commit 6c55bff

File tree

1 file changed

+28
-9
lines changed

1 file changed

+28
-9
lines changed

README.md

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
# vue-infinite-loading
44
An infinite loading/scroll plugin for Vue.js
55

6-
## Demo
6+
## Demos
77

88
### Picture demo
99

@@ -31,8 +31,19 @@ export default {
3131
}
3232
```
3333

34+
### CommonJS
35+
```js
36+
const InfiniteLoading = require('vue-infinite-loading');
37+
38+
export default {
39+
components: {
40+
InfiniteLoading
41+
}
42+
}
43+
```
44+
3445
### Others
35-
The `InfiniteLoading` component will add to global `Vue` automatically, so you just need import it into your APP like this way:
46+
The `InfiniteLoading` component will register with the global `Vue` automatically, so you just need import it into your APP like this way:
3647
```html
3748
<script src="/path/to/vue-infinite-loading/dist/vue-infinite-loading.js"></script>
3849
```
@@ -44,25 +55,33 @@ Template:
4455
<ul>
4556
<li v-for="item in list" v-text="item"></li>
4657
</ul>
47-
<infinite-loading :distance="distance" :on-infinite="onInfinite" v-if="loadedAllData"></infinite-loading>
58+
<infinite-loading :distance="distance" :on-infinite="onInfinite" v-if="isLoadedAllData"></infinite-loading>
4859
</body>
4960
```
5061
### Props
5162

63+
#### on-infinite
64+
The callback use for scroll to specific distance from the bottom of scroll parent.
65+
66+
Most of the time, you should broadcast `$InfiniteLoading:loaded` event in this callback after loaded data completely, if not, the loading animation won't stop and the `InfiniteLoading` component no longer call this function.
67+
```
68+
- type Function
69+
- required false
70+
```
71+
5272
#### distance
53-
The distance from the footer of scroll parent that trigger loading function.(Unit: px)
73+
The critical value for scroll. If the distance from the bottom of scroll parent less than this property, the `on-infinite` callback will be called .
5474
```
5575
- type Number
5676
- required false
5777
- default 100
78+
- unit pixel
5879
```
5980

60-
#### on-infinite
61-
The loading function.
62-
63-
Most of the time, you should broadcast `$InfiniteLoading:loaded` event in the loading function after request data completely, if not, the loading animation won't stop and the `InfiniteLoading` component can't continue to request loading function.
81+
#### v-if
82+
As you know, this property is an official directive of `Vue.js` for render element conditionally, so we can render or destroy the `InfiniteLoading` component by it.
6483
```
65-
- type Function
84+
- type Boolean
6685
- required false
6786
```
6887

0 commit comments

Comments
 (0)