Skip to content

Commit 6e23717

Browse files
sanderlissenburgsanderlissenburg
committed
Basic vue setup
1 parent 2f25fe1 commit 6e23717

File tree

5 files changed

+111
-0
lines changed

5 files changed

+111
-0
lines changed

‎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: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
2+
<template>
3+
<div class="movies">
4+
<div class="movie" v-for="movie in movies" :key="movie.id">
5+
<img :src="movie.img"/>
6+
</div>
7+
</div>
8+
</template>
9+
10+
<script lang="ts">
11+
import Vue from "vue";
12+
import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
13+
14+
export default Vue.extend({
15+
data() {
16+
return {
17+
movies: [
18+
{
19+
id: 1,
20+
title: "The Matrix",
21+
img: "https://media-cache.cinematerial.com/p/500x/uq49lqmo/the-matrix-movie-poster.jpg?v=1548664065"
22+
},
23+
{
24+
id: 2,
25+
title: "Jurrasic Park",
26+
img: "https://media-cache.cinematerial.com/p/500x/4ubyv2go/jurassic-park-movie-poster.jpg?v=1456328203"
27+
},
28+
{
29+
id: 3,
30+
title: "Indiana Jones",
31+
img: "https://cdn.shopify.com/s/files/1/0057/3728/3618/products/609df06d7c2b5fb3125f16a7e4e34152_592ed277-d9d9-4400-af4b-f793370e5f54_480x.progressive.jpg?v=1573616163"
32+
}
33+
]
34+
};
35+
},
36+
mounted() {
37+
window.ias = new InfiniteAjaxScroll('.movies', {
38+
item: '.movie',
39+
next: () => {
40+
console.log("Next")
41+
},
42+
pagination: false,
43+
bind: false
44+
});
45+
46+
setTimeout(() => {
47+
ias.bind();
48+
}, 5000)
49+
}
50+
});
51+
</script>
52+
53+
<style lang="scss" scoped>
54+
55+
</style>

‎examples/vuejs/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
<!-- <link rel="stylesheet" href="./style.css"/> -->
9+
</head>
10+
<body>
11+
<div id="app">
12+
</div>
13+
<script src="./index.js"></script>
14+
</body>
15+
</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/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)