Skip to content

Commit 0c4a995

Browse files
fiegfieg
committed
minor improvements
1 parent 608d285 commit 0c4a995

File tree

3 files changed

+74
-29
lines changed

3 files changed

+74
-29
lines changed

‎examples/vuejs/App.vue‎

Lines changed: 53 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
<img :src="movie.img"/>
77
</div>
88
</div>
9-
<a @click="nextHandler()" class="next">Next</a>
9+
<div class="loader" v-if="isLoading"></div>
10+
<div class="last" v-if="isLast">No more movies 😒</div>
1011
</div>
1112
</template>
1213

@@ -33,34 +34,39 @@ const catalog = [
3334
}
3435
]
3536
36-
let ias = null;
37-
3837
export default Vue.extend({
3938
data() {
4039
return {
40+
ias: null,
41+
isLast: false,
42+
isLoading: false,
4143
movies: []
4244
};
4345
},
4446
mounted() {
45-
// Simulate initial load
46-
Promise.all([
47-
this.loadNewMovie(),
48-
this.loadNewMovie(),
49-
this.loadNewMovie(),
50-
this.loadNewMovie()
51-
]).then(() => {
52-
ias = new InfiniteAjaxScroll('.movies', {
53-
item: '.movie',
54-
pagination: false,
55-
});
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+
});
5655
57-
ias.on('hit', () => {
58-
console.log("hit!!!")
59-
this.loadNewMovie()
60-
})
61-
})
56+
ias.on('last', () => {
57+
this.isLast = true;
58+
});
6259
},
6360
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+
},
6470
loadNewMovie() {
6571
return new Promise((resolve) => {
6672
// Simulate loading of new movie
@@ -70,24 +76,44 @@ export default Vue.extend({
7076
7177
this.movies.push(movie)
7278
resolve()
73-
}, 2000)
79+
}, 200)
7480
})
75-
},
76-
nextHandler() {
77-
this.loadNewMovie()
7881
}
7982
}
8083
});
8184
</script>
8285

8386
<style lang="scss" scoped>
87+
.movies {
88+
margin: 0 auto;
89+
padding: 20px;
90+
max-width: 300px;
91+
}
8492
.movie {
85-
margin: 20px 0;
86-
padding: 20px 20px;
87-
width: 300px;
88-
background-color: #ff0000;
93+
margin-top: 20px;
94+
padding: 20px;
95+
background-image: linear-gradient(to right, #EE0979 0%, #F73D39 20%);
8996
img {
9097
width: 100%;
9198
}
9299
}
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+
}
93119
</style>

‎examples/vuejs/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
66
<title>VueJS - Infinite Ajax Scroll Example</title>
77
<meta name="description" content="An example of infinite scrolling in VueJS with Infinite Ajax Scroll">
8-
<!-- <link rel="stylesheet" href="./style.css"/> -->
98
</head>
109
<body>
1110
<div id="app">
1211
</div>
1312
<script src="./index.js"></script>
1413
</body>
15-
</html>
14+
</html>

‎examples/vuejs/loader.svg‎

Lines changed: 20 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)