1 | # Overview
|
2 | mint-loadmore is a two-direction mobile pull-to-refresh component for vue.js.
|
3 |
|
4 | # Installation
|
5 | ```bash
|
6 | $ npm install mint-loadmore
|
7 | ```
|
8 |
|
9 | # Usage
|
10 | Import `mint-loadmore` to your project:
|
11 | ```Javascript
|
12 | require('mint-loadmore/lib/index.css');
|
13 |
|
14 | // ES6 mudule
|
15 | import Loadmore from 'mint-loadmore';
|
16 |
|
17 | // CommonJS
|
18 | const Loadmore = require('mint-loadmore').default;
|
19 | ```
|
20 |
|
21 | Register component:
|
22 | ```Javascript
|
23 | Vue.component('loadmore', Loadmore);
|
24 | ```
|
25 |
|
26 | Then use it:
|
27 | ```html
|
28 | <loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded">
|
29 | ...
|
30 | </loadmore>
|
31 | ```
|
32 |
|
33 | # Example
|
34 | Visit [this page](http://leopoldthecoder.github.io/Demos/vue-loadmore/index.html) using your mobile device.
|
35 | ```html
|
36 | <loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded">
|
37 | <ul>
|
38 | <li v-for="item in list">{{ item }}</li>
|
39 | </ul>
|
40 | </loadmore>
|
41 | <loadmore :top-method="loadTop2" :top-status.sync="topStatus">
|
42 | <ul>
|
43 | <li v-for="item in list2">{{ item }}</li>
|
44 | </ul>
|
45 | <div slot="top" class="mint-loadmore-top">
|
46 | <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
|
47 | <span v-show="topStatus === 'loading'">Loading...</span>
|
48 | </div>
|
49 | </loadmore>
|
50 | ```
|
51 | 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:
|
52 | ```Javascript
|
53 | loadTop(id) {
|
54 | ...// load more data
|
55 | this.$broadcast('onTopLoaded', id);
|
56 | }
|
57 | ```
|
58 | 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.
|
59 |
|
60 | For downward direction, things are similar. To invoke `bottom-method`, just pull the component `bottomDistance` pixels away from the bottom and then release it.
|
61 | ```Javascript
|
62 | loadBottom(id) {
|
63 | ...// load more data
|
64 | this.allLoaded = true;// if all data are loaded
|
65 | this.$broadcast('onBottomLoaded', id);
|
66 | }
|
67 | ```
|
68 | Remember to set `bottom-all-loaded` to `true` after all data are loaded. And of course broadcast `onBottomLoaded` with `id`.
|
69 |
|
70 | 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:
|
71 | * `pull` if the component is being pulled yet not ready to drop (top distance is within the distance threshold defined by `topDistance`)
|
72 | * `drop` if the component is ready to drop
|
73 | * `loading` if `topMethod` is running
|
74 |
|
75 | And of course, if a top HTMl template is given, `topPullText`, `topDropText` and `topLoadingText` are all unnecessary.
|
76 |
|
77 | Don't need to load data from upward direction? Simply omit the `topMethod` attribute. Same goes to downward.
|
78 |
|
79 | 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.
|
80 |
|
81 | # API
|
82 | | Option | Description | Value | Default |
|
83 | |-------------------|------------------------------------------------------------------|----------|-------------|
|
84 | | autoFill | if `true`, `loadmore` will check and fill its container | Boolean | true |
|
85 | | topPullText | top text when the component is being pulled down | String | '下拉刷新' |
|
86 | | topDropText | top text when the component is ready to drop | String | '释放更新' |
|
87 | | topLoadingText | top text while `topMethod` is running | String | '加载中...' |
|
88 | | topDistance | distance threshold that triggers `topMethod` | Number | 70 |
|
89 | | topMethod | upward load-more function | Function | |
|
90 | | bottomPullText | bottom text when the component is being pulled up | String | '上拉刷新' |
|
91 | | bottomDropText | bottom text when the component is ready to drop | String | '释放更新' |
|
92 | | bottomLoadingText | bottom text while `bottomMethod` is running | String | '加载中...' |
|
93 | | bottomDistance | distance threshold that triggers `bottomMethod` | Number | 70 |
|
94 | | bottomMethod | downward load-more function | Function | |
|
95 | | bottomAllLoaded | if `true`, `bottomMethod` can no longer be triggered | Boolean | false |
|
96 |
|
97 | # License
|
98 | MIT
|