如何使无限滚动/加载器在下一步?

Question

hello，我想在无限加载后显示数据，我的数据通过asyncData发送到页面和id页面，就像这样

Page

<script>
export default {
async asyncData({ $axios, store }) {
const customerId = store.getters['user/auth/customerId']
if (!customerId) {
return
}
const products = await customerApi.getProducts(
{ $axios },
customerId,
this.page
)
return {
products,
}
},
data() {
return {
page: 1,
}
},
}
</script>

我有第一页的数据。产品是道具数据发送在我的模板。在我的模板中，我添加了一个infinite loading

template

<template>
<generic-button v-if="!viewMore" inline @click="viewMore = true">
see more
</generic-button>
<client-only v-else>
<infinite-loading
:distance="800"
force-use-infinite-wrapper
@infinite="infiniteHandler"
></infinite-loading>
</client-only>
</template>
<script>
export default {
components: {
InfiniteLoading: () =>
process.client
? import('vue-infinite-loading')
: Promise.resolve({ render: (h) => h('div') }),
},
props: {
products: {
type: Array,
required: true,
},
},
data() {
return {
page: 1,
}
},
methods: {
infiniteHandler($state) {
// the method that will look for the data when the pagination changes
},
},
}
</script>

我希望当分页启动时，它通过将page参数更改为+1重新启动asyncData请求并显示数据

谢谢

Answer 1

真的不是vue-infinite-loading包的大粉丝，但我仍然设法使它工作。

这是你想要的父/子关系的最终结果。

parent page

<template>
<div>
<nuxt-link :to="{ name: 'redirect' }">
Go to another page and come back to have this one triggered
</nuxt-link>
<child ref="child" :users="users" @fetchMore="callApi"></child>
</div>
</template>
<script>
export default {
name: 'ParentPage',
async asyncData({ $axios }) {
const { data } = await $axios.$get(
'https://reqres.in/api/users?per_page=2&page=1'
)
return { users: data }
},
methods: {
async callApi(newPageAsked) {
const { data: newUsers } = await this.$axios.$get(
`https://reqres.in/api/users?per_page=2&page=${newPageAsked}`
)
console.log('new users fetched? ', newUsers)
if (newUsers.length) {
// if API got some new users, add them to the current list
this.users = [...this.users, ...newUsers]
// tell `infinite-loading` component that the fetch was successful
this.$refs.child.$refs.infiniteLoader.stateChanger.loaded()
} else {
// if the API do not have anymore users to fetch
this.$refs.child.$refs.infiniteLoader.stateChanger.complete()
}
},
},
}
</script>

Child.vue

<template>
<div class="small-height">
<div v-for="user in users" :key="user.id">
<p class="user">
<span>{{ user.first_fame }}</span>
<span>{{ user.last_name }}</span>
<br />
<span>{{ user.email }}</span>
<br />
<img :src="user.avatar" />
</p>
</div>
<infinite-loading
ref="infiniteLoader"
@infinite="infiniteHandler"
></infinite-loading>
</div>
</template>
<script>
import InfiniteLoading from 'vue-infinite-loading'
export default {
name: 'Child',
components: {
InfiniteLoading,
},
props: {
users: {
type: Array,
default: () => [],
},
},
data() {
return {
page: 1,
}
},
methods: {
infiniteHandler($state) {
this.page += 1
this.$emit('fetchMore', this.page)
},
},
}
</script>
<style scoped>
.small-height {
height: 200px;
border: 2px solid red;
width: 400px;
overflow-y: auto;
}
.user {
height: 200px;
}
</style>

这里是这个的github仓库，托管版本可以在这里找到!

我已经添加了注释，如果你检查网络选项卡，你应该有足够的信息来看看发生了什么。
我使用了require。