vue-slide-for-more
Version:
A vuejs(vue2) component for loading more data when the content was slide to the bottom on mobile, provided refresh function, supported SSR
129 lines (105 loc) • 5.25 kB
Markdown
# vue-slide-for-more
[](https://www.npmjs.com/package/vue-slide-for-more)
[](https://www.npmjs.com/package/vue-slide-for-more)
> `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.
You can rewrite all style by set prop `wrapClass`. the css file content maybe like:
```scss
.[wrapClass] {
...
.slide-for-more-top-tip-wrap {
/* The refresh tip wrap style */
...
.slide-for-more-top-tip {
/* The refresh tip wrap style, in SlideForMore module */
...
}
}
.slide-for-more-content {
/* The content wrap style */
...
}
.slide-for-more-tip-wrap {
/* The loadMore tip wrap style */
...
.slide-for-more-tip {
/* The loadMore tip wrap style, in SlideForMore module */
...
}
}
}
```
## Demo
https://livelybone.github.io/vue/vue-slide-for-more
## Installation
```bash
npm install vue-slide-for-more --save-dev
```
## 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}
})
```
## Apply
### SlideForMoreBase
```html
// template
<template>
<SlideForMoreBase
:wrapClass="''"
tipHeight="40px"
contentMinHeight="100vh"
baseSize="100px"
: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
```html
// template. SlideForMore is a simple packaging of SlideForMoreBase
<template>
<SlideForMore
:wrapClass="''"
tipHeight="40px"
contentMinHeight="100vh"
baseSize="100px"
:slideValue="100"
:isSearching="false">
<div v-for="el in list">{{el}}</div>
</SlideForMore>
</template>
```
## Props
| Name | Type | DefaultValue | Description |
| -------------------- | ----------------------------------------- | ------------- | ------------ |
| `wrapClass` | `String` | none | Used to set the class of wrap. When it Used, the prop 'baseSize' will be ignored, and you must rewrite all the style of the component module in global |
| `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 |
| `contentMinHeight` | `String` | none | Used to set the min-height of `div.slide-for-more-content` |
| `baseSize` | `String` | `100px` | Used to set size of content shadow and line-height of tip. The component style will crash when it's invalid. Tested by reg: /\d(rem|px|em)$/ |
| `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 |