Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ElemeFE/vue-infinite-scroll
An infinite scroll directive for vue.js.
https://github.com/ElemeFE/vue-infinite-scroll
Last synced: 3 months ago
JSON representation
An infinite scroll directive for vue.js.
- Host: GitHub
- URL: https://github.com/ElemeFE/vue-infinite-scroll
- Owner: ElemeFE
- Created: 2015-12-11T09:19:51.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-11-18T15:05:15.000Z (about 1 year ago)
- Last Synced: 2024-05-22T13:04:51.999Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 36.1 KB
- Stars: 2,848
- Watchers: 45
- Forks: 417
- Open Issues: 97
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
- awesome-vue-cn - vue-infinite-scroll
- stars - ElemeFE/vue-infinite-scroll
- awesome-vue - vue-infinite-scroll - infinite-scroll?style=social) - VueJS的无限滚动指令 (UI组件)
- awesome-github-vue - vue-infinite-scroll - VueJS的无限滚动指令 (UI组件)
- awesome-vue - vue-infinite-scroll - VueJS的无限滚动指令 (UI组件)
- awesome-github-vue - vue-infinite-scroll - VueJS的无限滚动指令 (UI组件)
- awesome - vue-infinite-scroll - VueJS的无限滚动指令 (UI组件)
README
# vue-infinite-scroll
vue-infinite-scroll is an infinite scroll directive for vue.js.
# Install
```Bash
npm install vue-infinite-scroll --save
```
### CommonJS
You can use any build tool which supports `commonjs`:
```JavaScript
// register globally
var infiniteScroll = require('vue-infinite-scroll');
Vue.use(infiniteScroll)
// or for a single instance
var infiniteScroll = require('vue-infinite-scroll');
new Vue({
directives: {infiniteScroll}
})
```
Or in ES2015:
```JavaScript
// register globally
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
// or for a single instance
import infiniteScroll from 'vue-infinite-scroll'
new Vue({
directives: {infiniteScroll}
})
```
### Direct include
You can use the CDN: https://unpkg.com/vue-infinite-scroll, `infiniteScroll` is exposed to `window` and will automatically install itself. Also you can use your local copy:
```HTML
```
## Usage
Use v-infinite-scroll to enable the infinite scroll, and use infinite-scroll-* attributes to define its options.
The method appointed as the value of v-infinite-scroll will be executed when the bottom of the element reaches the bottom of the viewport.
```HTML
...
```
```JavaScript
var count = 0;
new Vue({
el: '#app',
data: {
data: [],
busy: false
},
methods: {
loadMore: function() {
this.busy = true;
setTimeout(() => {
for (var i = 0, j = 10; i < j; i++) {
this.data.push({ name: count++ });
}
this.busy = false;
}, 1000);
}
}
});
```
# Options
| Option | Description |
| ----- | ----- |
| infinite-scroll-disabled | infinite scroll will be disabled if the value of this attribute is true. |
| infinite-scroll-distance | Number(default = 0) - the minimum distance between the bottom of the element and the bottom of the viewport before the v-infinite-scroll method is executed. |
| infinite-scroll-immediate-check | Boolean(default = true) - indicates that the directive should check immediately after bind. Useful if it's possible that the content is not tall enough to fill up the scrollable container. |
| infinite-scroll-listen-for-event | infinite scroll will check again when the event is emitted in Vue instance. |
| infinite-scroll-throttle-delay | Number(default = 200) - interval(ms) between next time checking and this time |
## Development
|Command|Description|
|---|---|
|npm run build|Build in umd format|
|npm test|Lint code|
# License
MIT