我正在尝试使用分页和延迟加载来访问数据。 Buts仅仅对第一个请求有效。页面末尾的最后一个参数递增无效。 http://features.domain_server.com/mobileapi/eggsrate/1。我正在尝试在页面末尾更改最后一个参数。 http://features.domain_server.com/mobileapi/eggsrate/2，当第二个请求完成时，然后点击http://features.domain_server.com/mobileapi/eggsrate/3。我尝试使用增量方法，但不起作用
new Vue({
el: "#app",
data: {
posts: [],
limit: 8,
busy: false
},
methods: {
loadMore() {
console.log("Adding 10 more data results");
this.busy = true;
axios.get("http://features.domain_server.com/mobileapi/eggsrate/1/0").then(response => {
const append = response.data.slice(
this.posts.length,
this.posts.length + this.limit
);
this.posts = this.posts.concat(append);
this.busy = false;
});
},
},
created() {
this.loadMore();
}
});
AOS.init();<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Egg Rates</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css'>
<link rel='stylesheet' href='https://unpkg.com/aos@next/dist/aos.css'>
</head>
<body>
<!-- partial:index.partial.html -->
<section class="section">
<div id="app">
<ul>
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="limit">
<li v-for="post in posts" style="margin-bottom: 2rem;" data-aos="slide-up" data-aos-offset="100" data-aos-easing="ease-out-back">
<div class="card">
<header class="card-header">
<p class="card-header-title">
{{post.id}}
</p>
</header>
<div class="card-content">
<div class="content">
<p>{{post.name}}</p>
<p>{{post.cities}}</p>
</div>
</div>
</div>
</li>
</div>
</ul>
</div>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js'></script>
<script src='https://unpkg.com/aos@next/dist/aos.js'></script>
<script src='https://unpkg.com/[email protected]/vue-infinite-scroll.js'></script>
<script src="./script.js"></script>
</body>
</html>除了所有其他注意事项，您只需要跟踪当前页面并在加载更多时递增当前页面。
data: () => ({
posts: [],
limit: 8,
busy: false,
page: 0 // 👈 added this
}),
和loadMore()中>
axios.get(`http://features.domain_server.com/mobileapi/eggsrate/1/${this.page++}`)