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
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 what you just need;// or; // Global registerVue;Vue; // Local register components:SlideForMore SlideForMoreBase
Use in html, see what your can use in CDN: unpkg
Apply
SlideForMoreBase
// template {{isSearching?'正在刷新...':'刷新'}} {{el}} {{isSearching?'正在查询...':'获取更多'}}
SlideForMore
// template. SlideForMore is a simple packaging of SlideForMoreBase {{el}}
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 // css
Or
// scss ; // css ;
Or, you can build your custom style by copying and editing index.scss