Skip to content

Commit 3b36f0b

Browse files
PeachScriptPeachScript
committed
Add documentation for trigger manually
1 parent ec8ad42 commit 3b36f0b

File tree

3 files changed

+294
-2
lines changed

3 files changed

+294
-2
lines changed

‎src/components/DemoPhone.vue

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<p class="basic-list-item" v-for="item in list" v-text="item"></p>
66
<infinite-loading :on-infinite="onInfinite"></infinite-loading>
77
</div>
8-
<div class="hacker-news-list" v-if="['hackerNews', 'withFilter'].indexOf(demoType) > -1">
8+
<div class="hacker-news-list" v-if="['hackerNews', 'withFilter', 'manualLoad'].indexOf(demoType) > -1">
99
<div class="hacker-news-header">
1010
<a target="_blank" href="http://www.ycombinator.com/"><img src="https://news.ycombinator.com/y18.gif"></a>
1111
<span>Hacker News</span>
@@ -22,7 +22,8 @@
2222
<p><a target="_blank" :href="item.url" v-text="item.title"></a></p>
2323
<p><small>{{ item.points }} points by <a target="_blank" :href="'https://news.ycombinator.com/user?id=' + item.author" v-text="item.author"></a> | <a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectID" v-text="item.num_comments + ' comments'"></a></small></p>
2424
</div>
25-
<infinite-loading :on-infinite="onInfinite">
25+
<button class="btn-load-more" v-show="distance < 0" @click="loadMore">Load more</button>
26+
<infinite-loading :on-infinite="onInfinite" :distance="distance" v-ref:infinite-loading>
2627
<span slot="no-more">
2728
There is no more Hacker News :(
2829
</span>
@@ -51,10 +52,12 @@
5152
'/withFilter': 'withFilter',
5253
'/spinners': 'spinners',
5354
'/serverSideRendering': 'hackerNews',
55+
'/triggerManually': 'manualLoad',
5456
},
5557
timer: null,
5658
tag: 'story',
5759
spinner: 'default',
60+
distance: 100,
5861
};
5962
},
6063
computed: {
@@ -136,17 +139,50 @@
136139
}
137140
});
138141
break;
142+
case 'manualLoad':
143+
this.$http.get(api, {
144+
params: {
145+
tags: 'story',
146+
page: (this.list.length / 20) + 1,
147+
},
148+
}).then(res => res.json()).then((data) => {
149+
if (this.demoType === 'manualLoad') {
150+
if (data.hits.length) {
151+
this.list = this.list.concat(data.hits);
152+
this.$broadcast('$InfiniteLoading:loaded');
153+
if (this.list.length / 20 === 10) {
154+
this.$broadcast('$InfiniteLoading:complete');
155+
} else if (data.page % 3 === 0) {
156+
this.distance = -Infinity;
157+
}
158+
} else {
159+
this.$broadcast('$InfiniteLoading:complete');
160+
}
161+
}
162+
});
163+
break;
139164
default:
140165
}
141166
},
142167
initInfiniteLoading() {
143168
this.list = [];
144169
this.spinner = 'default';
170+
if (this.$route.name === 'triggerManually') {
171+
this.distance = -Infinity;
172+
} else {
173+
this.distance = 100;
174+
}
145175
clearTimeout(this.timer);
146176
this.$nextTick(() => {
147177
this.$broadcast('$InfiniteLoading:reset');
148178
});
149179
},
180+
loadMore() {
181+
this.distance = 100;
182+
this.$nextTick(() => {
183+
this.$refs.infiniteLoading.attemptLoad();
184+
});
185+
},
150186
},
151187
events: {
152188
'$DemoPhone:changeSpinner': function changeSpinner(spinner) {
@@ -255,5 +291,18 @@
255291
}
256292
}
257293
}
294+
.btn-load-more {
295+
display: block;
296+
width: 100%;
297+
padding: 8px 0 16px;
298+
font-size: 14px;
299+
color: #FF6601;
300+
cursor: pointer;
301+
border: 0;
302+
background: transparent;
303+
&:active {
304+
color: #e55d07;
305+
}
306+
}
258307
}
259308
</style>

‎src/components/TriggerManually.vue

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
<template>
2+
<h3>Trigger manually</h3>
3+
<p>In most cases, we hope load data immediately for the empty list, it is also the default behavior of this component.</p>
4+
<p>But in some special cases, you may want to trigger load action through a click or other manual behavior, there has a workaround to implement it, for example, we need to load data manually every three pages:</p>
5+
6+
<h4>Template</h4>
7+
<pre v-highlightjs v-if="$parent.docVersion < 2">&lt;div class=&quot;hacker-news-list&quot;&gt;
8+
&lt;div class=&quot;hacker-news-header&quot;&gt;
9+
&lt;a target=&quot;_blank&quot; href=&quot;http://www.ycombinator.com/&quot;&gt;
10+
&lt;img src=&quot;https://news.ycombinator.com/y18.gif&quot;&gt;
11+
&lt;/a&gt;
12+
&lt;span&gt;Hacker News&lt;/span&gt;
13+
&lt;/div&gt;
14+
&lt;div class=&quot;hacker-news-item&quot; v-for=&quot;item in list&quot;&gt;
15+
&lt;span class=&quot;num&quot; v-text=&quot;$index + 1&quot;&gt;&lt;/span&gt;
16+
&lt;p&gt;
17+
&lt;a target=&quot;_blank&quot; :href=&quot;item.url&quot; v-text=&quot;item.title&quot;&gt;&lt;/a&gt;
18+
&lt;/p&gt;
19+
&lt;p&gt;
20+
&lt;small&gt;
21+
&lt;span v-text=&quot;item.points&quot;&gt;&lt;/span&gt;
22+
points by
23+
&lt;a target=&quot;_blank&quot; :href=&quot;'https://news.ycombinator.com/user?id=' + item.author&quot;
24+
v-text=&quot;item.author&quot;&gt;&lt;/a&gt;
25+
|
26+
&lt;a target=&quot;_blank&quot; :href=&quot;'https://news.ycombinator.com/item?id=' + item.objectID&quot;
27+
v-text=&quot;item.num_comments + ' comments'&quot;&gt;&lt;/a&gt;
28+
&lt;/small&gt;
29+
&lt;/p&gt;
30+
&lt;/div&gt;
31+
&lt;button class=&quot;btn-load-more&quot; v-show=&quot;distance &lt; 0&quot; @click=&quot;manualLoad&quot;&gt;Load more&lt;/button&gt;
32+
&lt;infinite-loading :on-infinite=&quot;onInfinite&quot; v-ref:infinite-loading&gt;
33+
&lt;span slot=&quot;no-more&quot;&gt;
34+
There is no more Hacker News :(
35+
&lt;/span&gt;
36+
&lt;/infinite-loading&gt;
37+
&lt;/div&gt;</pre>
38+
<pre v-highlightjs v-if="$parent.docVersion >= 2 && $parent.docVersion < 2.2">&lt;div class=&quot;hacker-news-list&quot;&gt;
39+
&lt;div class=&quot;hacker-news-header&quot;&gt;
40+
&lt;a target=&quot;_blank&quot; href=&quot;http://www.ycombinator.com/&quot;&gt;
41+
&lt;img src=&quot;https://news.ycombinator.com/y18.gif&quot;&gt;
42+
&lt;/a&gt;
43+
&lt;span&gt;Hacker News&lt;/span&gt;
44+
&lt;/div&gt;
45+
&lt;div class=&quot;hacker-news-item&quot; v-for=&quot;(item, key) in list&quot;&gt;
46+
&lt;span class=&quot;num&quot; v-text=&quot;key + 1&quot;&gt;&lt;/span&gt;
47+
&lt;p&gt;
48+
&lt;a target=&quot;_blank&quot; :href=&quot;item.url&quot; v-text=&quot;item.title&quot;&gt;&lt;/a&gt;
49+
&lt;/p&gt;
50+
&lt;p&gt;
51+
&lt;small&gt;
52+
&lt;span v-text=&quot;item.points&quot;&gt;&lt;/span&gt;
53+
points by
54+
&lt;a target=&quot;_blank&quot; :href=&quot;'https://news.ycombinator.com/user?id=' + item.author&quot;
55+
v-text=&quot;item.author&quot;&gt;&lt;/a&gt;
56+
|
57+
&lt;a target=&quot;_blank&quot; :href=&quot;'https://news.ycombinator.com/item?id=' + item.objectID&quot;
58+
v-text=&quot;item.num_comments + ' comments'&quot;&gt;&lt;/a&gt;
59+
&lt;/small&gt;
60+
&lt;/p&gt;
61+
&lt;/div&gt;
62+
&lt;button class=&quot;btn-load-more&quot; v-show=&quot;distance &lt; 0&quot; @click=&quot;manualLoad&quot;&gt;Load more&lt;/button&gt;
63+
&lt;infinite-loading :on-infinite=&quot;onInfinite&quot; ref=&quot;infiniteLoading&quot;&gt;
64+
&lt;span slot=&quot;no-more&quot;&gt;
65+
There is no more Hacker News :(
66+
&lt;/span&gt;
67+
&lt;/infinite-loading&gt;
68+
&lt;/div&gt;</pre>
69+
<pre v-highlightjs v-if="$parent.docVersion >= 2.2">&lt;div class=&quot;hacker-news-list&quot;&gt;
70+
&lt;div class=&quot;hacker-news-header&quot;&gt;
71+
&lt;a target=&quot;_blank&quot; href=&quot;http://www.ycombinator.com/&quot;&gt;
72+
&lt;img src=&quot;https://news.ycombinator.com/y18.gif&quot;&gt;
73+
&lt;/a&gt;
74+
&lt;span&gt;Hacker News&lt;/span&gt;
75+
&lt;/div&gt;
76+
&lt;div class=&quot;hacker-news-item&quot; v-for=&quot;(item, key) in list&quot;&gt;
77+
&lt;span class=&quot;num&quot; v-text=&quot;key + 1&quot;&gt;&lt;/span&gt;
78+
&lt;p&gt;
79+
&lt;a target=&quot;_blank&quot; :href=&quot;item.url&quot; v-text=&quot;item.title&quot;&gt;&lt;/a&gt;
80+
&lt;/p&gt;
81+
&lt;p&gt;
82+
&lt;small&gt;
83+
&lt;span v-text=&quot;item.points&quot;&gt;&lt;/span&gt;
84+
points by
85+
&lt;a target=&quot;_blank&quot; :href=&quot;'https://news.ycombinator.com/user?id=' + item.author&quot;
86+
v-text=&quot;item.author&quot;&gt;&lt;/a&gt;
87+
|
88+
&lt;a target=&quot;_blank&quot; :href=&quot;'https://news.ycombinator.com/item?id=' + item.objectID&quot;
89+
v-text=&quot;item.num_comments + ' comments'&quot;&gt;&lt;/a&gt;
90+
&lt;/small&gt;
91+
&lt;/p&gt;
92+
&lt;/div&gt;
93+
&lt;button class=&quot;btn-load-more&quot; v-show=&quot;distance &lt; 0&quot; @click=&quot;manualLoad&quot;&gt;Load more&lt;/button&gt;
94+
&lt;infinite-loading @infinite=&quot;infiniteHandler&quot; ref=&quot;infiniteLoading&quot;&gt;
95+
&lt;span slot=&quot;no-more&quot;&gt;
96+
There is no more Hacker News :(
97+
&lt;/span&gt;
98+
&lt;/infinite-loading&gt;
99+
&lt;/div&gt;</pre>
100+
<p>
101+
In the template, we add a button to load data manually, set <code>v-show</code> directive to control hide or show, and bind a click event listener for it.
102+
<span v-if="$parent.docVersion < 2 || $parent.docVersion >=2.2">Then set <code v-if="$parent.docVersion < 2">v-ref</code><code v-else>ref</code> directive and bind <code>distance</code> property for the <code>infinite-loading</code> component.</span>
103+
</p>
104+
<h4>Script</h4>
105+
<pre v-highlightjs v-if="$parent.docVersion >= 1 && $parent.docVersion < 2">import InfiniteLoading from 'vue-infinite-loading';
106+
107+
const api = 'http://hn.algolia.com/api/v1/search_by_date?tags=story';
108+
109+
export default {
110+
data() {
111+
return {
112+
list: [],
113+
distance: -Infinity,
114+
};
115+
},
116+
methods: {
117+
onInfinite() {
118+
this.$http.get(api, {
119+
params: {
120+
page: this.list.length / 20 + 1,
121+
},
122+
}).then((res) =&gt; {
123+
if (res.data.hits.length) {
124+
this.list = this.list.concat(res.data.hits);
125+
this.$broadcast('$InfiniteLoading:loaded');
126+
if (this.list.length / 20 === 10) {
127+
this.$broadcast('$InfiniteLoading:complete');
128+
} else if (res.data.page % 3 === 0) {
129+
this.distance = -Infinity;
130+
}
131+
} else {
132+
this.$broadcast('$InfiniteLoading:complete');
133+
}
134+
});
135+
},
136+
manualLoad() {
137+
this.distance = 100;
138+
this.$nextTick(() => {
139+
this.$refs.infiniteLoading.attemptLoad();
140+
});
141+
},
142+
},
143+
components: {
144+
InfiniteLoading,
145+
},
146+
};</pre>
147+
<pre v-highlightjs v-if="$parent.docVersion >= 2 && $parent.docVersion < 2.2">import InfiniteLoading from 'vue-infinite-loading';
148+
import axios from 'axios';
149+
150+
const api = 'http://hn.algolia.com/api/v1/search_by_date?tags=story';
151+
152+
export default {
153+
data() {
154+
return {
155+
list: [],
156+
distance: -Infinity,
157+
};
158+
},
159+
methods: {
160+
onInfinite() {
161+
axios.get(api, {
162+
params: {
163+
page: this.list.length / 20 + 1,
164+
},
165+
}).then(({ data }) =&gt; {
166+
if (data.hits.length) {
167+
this.list = this.list.concat(data.hits);
168+
this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
169+
if (this.list.length / 20 === 10) {
170+
this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
171+
} else if (data.page % 3 === 0) {
172+
this.distance = -Infinity;
173+
}
174+
} else {
175+
this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
176+
}
177+
});
178+
},
179+
manualLoad() {
180+
this.distance = 100;
181+
this.$nextTick(() => {
182+
this.$refs.infiniteLoading.attemptLoad();
183+
});
184+
},
185+
},
186+
components: {
187+
InfiniteLoading,
188+
},
189+
};</pre>
190+
<pre v-highlightjs v-if="$parent.docVersion >= 2.2">import InfiniteLoading from 'vue-infinite-loading';
191+
import axios from 'axios';
192+
193+
const api = 'http://hn.algolia.com/api/v1/search_by_date?tags=story';
194+
195+
export default {
196+
data() {
197+
return {
198+
list: [],
199+
distance: -Infinity,
200+
};
201+
},
202+
methods: {
203+
infiniteHandler($state) {
204+
axios.get(api, {
205+
params: {
206+
page: this.list.length / 20 + 1,
207+
},
208+
}).then(({ data }) =&gt; {
209+
if (data.hits.length) {
210+
this.list = this.list.concat(data.hits);
211+
$state.loaded();
212+
if (this.list.length / 20 === 10) {
213+
$state.complete();
214+
} else if (data.page % 3 === 0) {
215+
this.distance = -Infinity;
216+
}
217+
} else {
218+
$state.complete();
219+
}
220+
});
221+
},
222+
manualLoad() {
223+
this.distance = 100;
224+
this.$nextTick(() => {
225+
this.$refs.infiniteLoading.attemptLoad();
226+
});
227+
},
228+
},
229+
components: {
230+
InfiniteLoading,
231+
},
232+
};</pre>
233+
<p>
234+
In the script, we set the <code>distance</code> to <code>-Infinite</code> by default, then we create a <code>manualLoad</code> function to change the <code>distance</code> to a positive value and trigger load manually, lastly, in the <code>onInfinite</code> function, we reset the <code>distance</code> to <code>-Infinite</code> every three pages.
235+
</p>
236+
<p>That's all, you can preview it on the right, hope it is useful!</p>
237+
</template>

‎src/config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,12 @@ const routes = [
3737
label: '3rd-Party Scroll Plugin',
3838
version: 2.1,
3939
},
40+
{
41+
path: '/trigger-manually',
42+
name: 'triggerManually',
43+
label: 'Trigger manually',
44+
version: 1,
45+
},
4046
],
4147
},
4248
{

0 commit comments

Comments
 (0)