获取最后一个参数上带有递增编号的api请求

我正在尝试使用分页和延迟加载来访问数据。但它只适用于第一次请求。页面末尾的最后一个参数incement不起作用。http://features.domain_server.com/mobileapi/eggsrate/1/0.我正在尝试更改页面末尾的最后一个参数。http://features.domain_server.com/mobileapi/eggsrate/1/1当第二个请求完成时http://features.domain_server.com/mobileapi/eggsrate/1/2然后http://features.domain_server.com/mobileapi/eggsrate/1/3。我尝试过增量方法，但不起作用。

new Vue({
el: "#app",
data: {
posts: [],
limit: 8,
busy: false
},
methods: {
loadMore() {
console.log("Adding 8 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/vue-infinite-scroll@2.0.2/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++}`)

相关内容

最新更新

热门标签：