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

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

A vuejs(vue2) component for loading more data when the content was slide to the bottom on mobile, provided refresh function, supported SSR.

vue-slide-for-more

NPM Version Download Month gzip with dependencies: 1.6kb pkg.module

pkg.module supported, which means that you can apply tree-shaking in you project

A vuejs(vue2) component for loading more data when the content was slide to the bottom on mobile, provided refresh function, supported SSR.

repository

https://github.com/livelybone/vue-slide-for-more.git

Demo

https://livelybone.github.io/vue/vue-slide-for-more/

Installation

npm i vue-slide-for-more -S

Global name

VueBtn

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 in html, see what your can use in CDN: unpkg

<-- use what you want -->
<script src="https://unpkg.com/vue-slide-for-more/lib/umd/<--module-->.js"></script>

Apply

SlideForMoreBase

// template
<template>
    <SlideForMoreBase
        tipHeight="40px"
        :slideValue="100" 
        :isSearching="isSearching">
        <div class="top-tip" slot="topTip">{{isSearching?'正在刷新...':'刷新'}}</div>
        <div v-for="el in list">{{el}}</div>
        <div class="bottom-tip" slot="tip">{{isSearching?'正在查询...':'获取更多'}}</div>
 </SlideForMoreBase>
</template>

SlideForMore

// template. SlideForMore is a simple packaging of SlideForMoreBase
<template>
    <SlideForMore 
        tipHeight="40px"
        :slideValue="100" 
        :isSearching="false">
        <div v-for="el in list">{{el}}</div>
    </SlideForMore>
</template>

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

style

For building style, you can use the css or scss file in lib directory.

// scss
import 'node_modules/vue-slide-for-more/lib/css/index.scss'

// css
import 'node_modules/vue-slide-for-more/lib/css/index.css'

Or

// scss
@import 'node_modules/vue-slide-for-more/lib/css/index.scss';

// css
@import 'node_modules/vue-slide-for-more/lib/css/index.css';

Or, you can build your custom style by copying and editing index.scss

Github Repository

Tags: #VueJs