如何在Nuxt中制作无限大的滚动/加载程序？

Question

你好，我想在无限加载后显示数据，我的数据由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>

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

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>

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

谢谢

Answer 1

我真的不是套餐的超级粉丝，但我还是设法让它运转起来。

以下是您想要的父/子关系的最终结果。

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回购，托管版本可以是在这里发现的！

我已经添加了注释，如果您检查网络选项卡，您应该有足够的信息来查看正在发生的事情。

我使用reqres.in来模拟分页API。