|
1 | 1 | <p align="center"><img width="200" src="./doc/logo.png"></p> |
2 | 2 |
|
3 | | -# vue-infinite-loading |
4 | | -An infinite loading/scroll plugin for Vue.js |
| 3 | +<p align="center"><img src="./doc/demo.gif"></p> |
5 | 4 |
|
6 | | -## Demos |
| 5 | +## Intro |
| 6 | +This plugin is an infinite scroll plugin for Vue.js, it can help you create an infinite scroll list fastly. |
7 | 7 |
|
8 | | -### Picture demo |
| 8 | +### Features |
| 9 | +- Light-weight, only 7.18 KB |
| 10 | +- Mobile friendly |
| 11 | +- Compatible with any scrollable element |
| 12 | +- Loading animation |
| 13 | +- Support result display after loading |
9 | 14 |
|
10 | | - |
| 15 | +## Usage & Guide |
| 16 | +To check out live examples and docs, visit [Vue-infinite-loading GitHub Pages](https://peachscript.github.io/vue-infinite-loading/). |
11 | 17 |
|
12 | | -### Live demo |
13 | | - |
14 | | -See [http://peachscript.github.io/vue-infinite-loading/](http://peachscript.github.io/vue-infinite-loading/) |
15 | | - |
16 | | -## Install |
17 | | -```bash |
18 | | -npm install vue-infinite-loading --save |
19 | | -``` |
20 | | - |
21 | | -## Import |
22 | | - |
23 | | -### ES6 |
24 | | -```js |
25 | | -import InfiniteLoading from 'vue-infinite-loading'; |
26 | | - |
27 | | -export default { |
28 | | - components: { |
29 | | - InfiniteLoading |
30 | | - } |
31 | | -} |
32 | | -``` |
33 | | - |
34 | | -### CommonJS |
35 | | -```js |
36 | | -const InfiniteLoading = require('vue-infinite-loading'); |
37 | | - |
38 | | -export default { |
39 | | - components: { |
40 | | - InfiniteLoading |
41 | | - } |
42 | | -} |
43 | | -``` |
44 | | - |
45 | | -### Others |
46 | | -The `InfiniteLoading` component will register with the global `Vue` automatically, so you just need import it into your APP like this way: |
47 | | -```html |
48 | | -<script src="/path/to/vue-infinite-loading/dist/vue-infinite-loading.js"></script> |
49 | | -``` |
50 | | - |
51 | | -## Usage |
52 | | -Template: |
53 | | -```html |
54 | | -<body> |
55 | | - <ul> |
56 | | - <li v-for="item in list" v-text="item"></li> |
57 | | - </ul> |
58 | | - <infinite-loading :distance="distance" :on-infinite="onInfinite" v-if="isLoadedAllData"></infinite-loading> |
59 | | -</body> |
60 | | -``` |
61 | | -### Props |
62 | | - |
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 | | - |
72 | | -#### distance |
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 . |
74 | | -``` |
75 | | -- type Number |
76 | | -- required false |
77 | | -- default 100 |
78 | | -- unit pixel |
79 | | -``` |
80 | | - |
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. |
83 | | -``` |
84 | | -- type Boolean |
85 | | -- required false |
86 | | -``` |
87 | | - |
88 | | -### Events |
89 | | - |
90 | | -#### $InfiniteLoading:loaded |
91 | | -When the `InfiniteLoading` component received this event, it will hide the loading animation and continue to wait the next trigger. |
92 | | - |
93 | | -#### $InfiniteLoading:noResults |
94 | | -When the `InfiniteLoading` component received this event, it will display the no results tips. |
95 | | - |
96 | | -#### $InfiniteLoading:noMore |
97 | | -When the `InfiniteLoading` component received this event, it will display the no more data tips. |
98 | | - |
99 | | -#### $InfiniteLoading:reset |
100 | | -When the `InfiniteLoading` component received this event, it will reset itself, and the `on-infinite` function will be called. Maybe you need it when you use the component in some UI component like filter tabs. |
101 | | - |
102 | | -### Slots |
103 | | - |
104 | | -#### no-results |
105 | | -This content will display when the `InfiniteLoading` component received `$InfiniteLoading:noResults` event. |
106 | | -``` |
107 | | -- type String |
108 | | -- default No results :( |
109 | | -``` |
110 | | - |
111 | | -#### no-more |
112 | | -This content will display when the `InfiniteLoading` component received `$InfiniteLoading:noMore` event. |
113 | | -``` |
114 | | -- type String |
115 | | -- default No more data :) |
116 | | -``` |
| 18 | +## Changelog |
| 19 | +Details changes for each release are documented in the [release notes](https://github.com/PeachScript/vue-infinite-loading/releases). |
117 | 20 |
|
118 | 21 | ## Development Setup |
119 | 22 | ```bash |
|
0 commit comments