vue-scroll-loader
A scroll loading component for vue.js.
Browsers
Already use IntersectionObserver polyfill compatible with mainstream browsers.
✔ | ✔ | 6+ | ✔ | 7+ | ✔ | 4.4+ |
---|---|---|---|---|---|---|
Install
NPM
npm install vue-scroll-loader
CDN
Usage
Put <scroll-loader/>
below the list, and use loader-*
props to define its options.
When the scroll-loader reaches the bottom of the viewport, the method specified by loader-method is executed.
<!-- Replace the default loading animation with slot --> Loading...
Vue el: '#app' { return disable: false page: 1 pageSize: 30 images: } methods: { axios }
Options
Props | Description | Required | Type | Default |
---|---|---|---|---|
loader-method | Scrolling to the bottom to execute the method. | true | Function | -- |
loader-disable | scroll-loader will be disabled if the value of this props is true. | false | Boolean | false |
loader-distance | The minimum distance between the scroll-loader and the bottom of the viewport before the loader-method method is executed. | false | Number | 0 |
loader-color | scroll-loader the color of the animation. | false | String | #CCCCCC |
loader-size | scroll-loader the size of the animation. | false | Number | 50 |
loader-viewport | relative viewport element,default top-level document viewport. | false | Element | viewport |
License
This project is licensed under the MIT License - see the LICENSE file for details
Acknowledgments
The default loading animation is from CSSFX