Skip to content

Commit 92990f1

Browse files
fiegfieg
authored
Merge pull request #678 from sanderlissenburg/feature/vue-example
Feature/vue example
2 parents ece45dc + 0c4a995 commit 92990f1

File tree

7 files changed

+195
-0
lines changed

7 files changed

+195
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ node_modules
33
test/screenshots
44
test/videos
55
.build
6+
.idea

‎examples/vuejs/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
dist
3+
.cache
4+
package-lock.json

‎examples/vuejs/App.vue‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
2+
<template>
3+
<div>
4+
<div class="movies">
5+
<div class="movie" v-for="movie in movies" :key="movie.id">
6+
<img :src="movie.img"/>
7+
</div>
8+
</div>
9+
<div class="loader" v-if="isLoading"></div>
10+
<div class="last" v-if="isLast">No more movies 😒</div>
11+
</div>
12+
</template>
13+
14+
<script lang="ts">
15+
import Vue from "vue";
16+
import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
17+
18+
const catalog = [
19+
{
20+
title: "The Matrix",
21+
img: "https://media-cache.cinematerial.com/p/500x/uq49lqmo/the-matrix-movie-poster.jpg?v=1548664065"
22+
},
23+
{
24+
title: "Jurrasic Park",
25+
img: "https://media-cache.cinematerial.com/p/500x/4ubyv2go/jurassic-park-movie-poster.jpg?v=1456328203"
26+
},
27+
{
28+
title: "Indiana Jones",
29+
img: "https://cdn.shopify.com/s/files/1/0057/3728/3618/products/609df06d7c2b5fb3125f16a7e4e34152_592ed277-d9d9-4400-af4b-f793370e5f54_480x.progressive.jpg?v=1573616163"
30+
},
31+
{
32+
title: "2001, A space odyssey",
33+
img: "https://cdn.shopify.com/s/files/1/1416/8662/products/2001_a_space_odyssey_french_grande_linen_original_film_art_f_1200x.jpg?v=1587685085"
34+
}
35+
]
36+
37+
export default Vue.extend({
38+
data() {
39+
return {
40+
ias: null,
41+
isLast: false,
42+
isLoading: false,
43+
movies: []
44+
};
45+
},
46+
mounted() {
47+
const ias = new InfiniteAjaxScroll('.movies', {
48+
item: '.movie',
49+
next: this.nextPage,
50+
spinner: {
51+
show: () => this.isLoading = true,
52+
hide: () => this.isLoading = false,
53+
},
54+
});
55+
56+
ias.on('last', () => {
57+
this.isLast = true;
58+
});
59+
},
60+
methods: {
61+
nextPage(pageIndex) {
62+
const hasNextUrl = pageIndex < 4;
63+
64+
return Promise.all([
65+
this.loadNewMovie(),
66+
this.loadNewMovie(),
67+
this.loadNewMovie()
68+
]).then(() => hasNextUrl);
69+
},
70+
loadNewMovie() {
71+
return new Promise((resolve) => {
72+
// Simulate loading of new movie
73+
setTimeout(() => {
74+
const index = Math.round((Math.random() * (catalog.length - 1)));
75+
const movie = {...catalog[index], id: this.movies.length + 1 };
76+
77+
this.movies.push(movie)
78+
resolve()
79+
}, 200)
80+
})
81+
}
82+
}
83+
});
84+
</script>
85+
86+
<style lang="scss" scoped>
87+
.movies {
88+
margin: 0 auto;
89+
padding: 20px;
90+
max-width: 300px;
91+
}
92+
.movie {
93+
margin-top: 20px;
94+
padding: 20px;
95+
background-image: linear-gradient(to right, #EE0979 0%, #F73D39 20%);
96+
img {
97+
width: 100%;
98+
}
99+
}
100+
101+
.last {
102+
font-family: sans-serif;
103+
text-align: center;
104+
color: #999;
105+
line-height: 40px;
106+
}
107+
108+
.loader {
109+
height: 40px;
110+
background: transparent url('loader.svg') no-repeat center center;
111+
background-size: 40px 19px;
112+
animation: flipAnimation 1s infinite;
113+
}
114+
115+
@keyframes flipAnimation {
116+
0%,100% { transform: rotateY(-180deg); }
117+
50% { transform: rotateY(0deg); }
118+
}
119+
</style>

‎examples/vuejs/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>VueJS - Infinite Ajax Scroll Example</title>
7+
<meta name="description" content="An example of infinite scrolling in VueJS with Infinite Ajax Scroll">
8+
</head>
9+
<body>
10+
<div id="app">
11+
</div>
12+
<script src="./index.js"></script>
13+
</body>
14+
</html>

‎examples/vuejs/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Vue from 'vue';
2+
import App from './App.vue';
3+
4+
new Vue({ render: createElement => createElement(App) }).$mount('#app');

‎examples/vuejs/loader.svg‎

Lines changed: 20 additions & 0 deletions
Loading

‎examples/vuejs/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "infinite-ajax-scroll-vuejs-example",
3+
"private": true,
4+
"version": "1.0.0",
5+
"description": "An example of infinite scrolling in VueJS with Infinite Ajax Scroll",
6+
"homepage": "https://infiniteajaxscroll.com",
7+
"repository": {
8+
"type": "git",
9+
"url": "git+https://github.com/webcreate/infinite-ajax-scroll.git"
10+
},
11+
"author": "Sander Lissenburg & Jeroen Fiege",
12+
"bugs": {
13+
"url": "https://github.com/webcreate/infinite-ajax-scroll/issues"
14+
},
15+
"scripts": {
16+
"build": "parcel build *.html --public-url ./",
17+
"watch": "parcel watch * --public-url ./",
18+
"link": "npm link ../../"
19+
},
20+
"dependencies": {
21+
"@webcreate/infinite-ajax-scroll": "^3.0.0-beta.4",
22+
"vue": "^2.6.14",
23+
"vue-hot-reload-api": "^2.3.4"
24+
},
25+
"devDependencies": {
26+
"@vue/component-compiler-utils": "^3.2.2",
27+
"parcel-bundler": "^1.12.5",
28+
"pug": "^3.0.2",
29+
"sass": "^1.35.2",
30+
"typescript": "^4.3.5",
31+
"vue-template-compiler": "^2.6.14"
32+
}
33+
}

0 commit comments

Comments
 (0)