mint-loadmore is a two-direction mobile pull-to-refresh component for vue.js.
$ npm install mint-loadmoreImport mint-loadmore to your project:
require('mint-loadmore/lib/style.css');
// ES6 mudule
import Loadmore from 'mint-loadmore';
// CommonJS
const Loadmore = require('mint-loadmore').default;Register component:
Vue.component('loadmore', Loadmore);Then use it:
<loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded">
...
</loadmore>Visit this page using your mobile device.
<loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded">
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</loadmore>
<loadmore :top-method="loadTop2" :top-status.sync="topStatus">
<ul>
<li v-for="item in list2">{{ item }}</li>
</ul>
<div slot="top" class="mint-loadmore-top">
<span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
<span v-show="topStatus === 'loading'">Loading...</span>
</div>
</loadmore>For upward direction, pull the component topDistance pixels away from the top and then release it, the function you appointed as top-method will run:
loadTop(id) {
...// load more data
this.$broadcast('onTopLoaded', id);
}At the end of your top-method, don't forget to broadcast the onTopLoaded event so that mint-loadmore removes topLoadingText. Note that a parameter called id is passed to loadTop and onTopLoaded. This is because after the top data is loaded, some reposition work is performed inside a mint-loadmore instance, and id simply tells the component which instance should be repositioned. You don't need to do anything more than passing id to onTopLoaded just as shown above.
For downward direction, things are similar. To invoke bottom-method, just pull the component bottomDistance pixels away from the bottom and then release it.
loadBottom(id) {
...// load more data
this.allLoaded = true;// if all data are loaded
this.$broadcast('onBottomLoaded', id);
}Remember to set bottom-all-loaded to true after all data are loaded. And of course broadcast onBottomLoaded with id.
You can customize the top and bottom DOM using an HTML template. For example, to customize the top DOM, you'll need to add a variable that syncs with top-status on loadmore tag, and then write your template with a slot attribute set to top and class set to mint-loadmore-top. top-status has three possible values that indicates which status the component is at:
pullif the component is being pulled yet not ready to drop (top distance is within the distance threshold defined bytopDistance)dropif the component is ready to droploadingiftopMethodis running
And of course, if a top HTMl template is given, topPullText, topDropText and topLoadingText are all unnecessary.
Don't need to load data from upward direction? Simply omit the topMethod attribute. Same goes to downward.
Upon loaded, loadmore will automatically check if it is tall enough to fill its container. If not, bottom-method will run until its container is filled. Turn off auto-fill if you'd rather handle this manually.
| Option | Description | Value | Default |
|---|---|---|---|
| autoFill | if true, loadmore will check and fill its container |
Boolean | true |
| topPullText | top text when the component is being pulled down | String | '下拉刷新' |
| topDropText | top text when the component is ready to drop | String | '释放更新' |
| topLoadingText | top text while topMethod is running |
String | '加载中...' |
| topDistance | distance threshold that triggers topMethod |
Number | 70 |
| topMethod | upward load-more function | Function | |
| bottomPullText | bottom text when the component is being pulled up | String | '上拉刷新' |
| bottomDropText | bottom text when the component is ready to drop | String | '释放更新' |
| bottomLoadingText | bottom text while bottomMethod is running |
String | '加载中...' |
| bottomDistance | distance threshold that triggers bottomMethod |
Number | 70 |
| bottomMethod | downward load-more function | Function | |
| bottomAllLoaded | if true, bottomMethod can no longer be triggered |
Boolean | false |
MIT