vue-slide-for-more

!gzip with dependencies: 1.8kb
!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

``bash
npm i vue-slide-for-more -S
`

Global name

VueBtn

Register the component

`javascript
// 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
`html
<-- use what you want -->

`

Apply

$3

`html
// template

`

$3

`html
// template. SlideForMore is a simple packaging of SlideForMoreBase

`

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.
`js
// 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
// 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`