使用 v-infinite-scroll 实现无限滚动时，适应页面大小，给出最优代码实现

v-infinite-scroll 是一个 Vue 插件，可以在滚动到页面底部时自动触发加载更多数据。下面是一个适应页面大小，给出最优代码实现的示例：

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
    <!-- 渲染数据 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      dataList: []
    }
  },
  methods: {
    async loadMore() {
      if (this.loading) return
      if (this.dataList.length >= this.total) return

      this.loading = true
      const { data } = await this.fetchData(this.page, this.pageSize)
      this.total = data.total
      this.dataList = this.dataList.concat(data.list)
      this.page++
      this.loading = false
    },
    fetchData(page, pageSize) {
      // 发送请求获取数据
    }
  }
}
</script>

在上述代码中，使用 v-infinite-scroll 绑定一个 loadMore 方法，当滚动到页面底部时就会自动触发该方法。为了避免重复加载，使用 loading 属性来控制是否正在加载数据，使用 page 和 pageSize 属性来控制分页，total 属性记录数据总数。使用 fetchData 方法发送请求获取数据，将返回的数据追加到 dataList 中，再更新 page 和 total 属性。最后在 loadMore 方法中将 loading 属性重置为 false。

需要注意的是，使用 v-infinite-scroll 时，需要设置 infinite-scroll-disabled 和 infinite-scroll-distance 属性。其中，infinite-scroll-disabled 属性用来控制是否禁用无限滚动，当值为 true 时，就不会再触发 loadMore 方法了。infinite-scroll-distance 属性用来设置触发 loadMore 方法的距离，默认为 0，表示当滚动到页面底部时立即触发 loadMore 方法，如果需要提前触发，可以设置一个正整数代表距离底部多少像素触发。