vue-slide-for-more is a vuejs (vue2) component to load more data when content slides down on mobile, providing refresh functionality, and SSR support.
pkg.module is supported, which means you can apply tree vibration in your project.
How to make use of it:
Installation:
npm i vue-slide-for-more -S
Register the component
/ import all
import {SlideForMore, SlideForMoreBase} from 'vue-slide-for-more';
// import what you just need
import SlideForMore from 'vue-slide-for-more/lib/umd/SlideForMore';
// or
import SlideForMoreBase from 'vue-slide-for-more/lib/umd/SlideForMoreBase';
// Global register
Vue.component('slide-for-more', SlideForMore);
Vue.component('slide-for-more-base', SlideForMoreBase);
// Local register
new Vue({
components:{SlideForMore, SlideForMoreBase}
})<-- use what you want --> <script src="https://unpkg.com/vue-slide-for-more/lib/umd/<--module-->.js"></script>
Props
| Name | Type | DefaultValue | Description |
|---|---|---|---|
tipHeight | String | 40px | Used to set the height of both div.slide-for-more-top-tip-wrap which shows refreshing and div.slide-for-more-tip-wrap which shows loading more |
slideValue | Number | 100 (px) | Used to set min value of slide distance to trigger events |
isSearching | Boolean | false | Used to tell the component whether you are searching or not. If you are searching, it will show the loading text. This is an important prop |
Events
| Name | EmittedData | Description |
|---|---|---|
refresh | none | Event for refresh |
slideDown | none | An alias of refresh event |
loadMore | none | Event for load more |
slideUp | none | An alias of loadMore event |
load more data when sliding to the bottom, vue-slide-for-more Plugin/Github
See Demo And Download
Official Website(livelybone): Click Here
This superior jQuery/javascript plugin is developed by livelybone. For extra advanced usage, please go to the official website.
