Press "Enter" to skip to content

Vuejs Load More Data When Sliding To The Bottom | vue-slide-for-more

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

NameTypeDefaultValueDescription
tipHeightString40pxUsed 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
slideValueNumber100 (px)Used to set min value of slide distance to trigger events
isSearchingBooleanfalseUsed 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

NameEmittedDataDescription
refreshnoneEvent for refresh
slideDownnoneAn alias of refresh event
loadMorenoneEvent for load more
slideUpnoneAn 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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.