[分享]下拉加载代码vue

下拉加载是一种常见的移动端页面设计，在用户滑动页面到底部时，自动加载下一页内容。Vue是一种MVVM框架，通过数据绑定和组件化的方式实现了响应式编程。在Vue中实现下拉加载可以很方便，我们可以利用Vu...

下拉加载是一种常见的移动端页面设计，在用户滑动页面到底部时，自动加载下一页内容。Vue是一种MVVM框架，通过数据绑定和组件化的方式实现了响应式编程。在Vue中实现下拉加载可以很方便，我们可以利用Vue提供的指令和组件来实现这一功能。

首先，我们需要在页面中加入一个容器元素，用来展示加载出来的数据。容器元素的高度要设置为固定值，在加载更多数据时，通过改变容器元素的scrollTop属性来实现滚动效果。我们可以利用Vue提供的scrollTop指令，将容器元素的scrollTop属性与模板中的一个变量绑定起来。

<template>
  <div class="container" v-scroll-top="scrollTop">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div class="loading" v-if="loading">加载中</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      scrollTop: 0,
      loading: false,
      page: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.loadMoreData()
  },
  methods: {
    async loadMoreData() {
      if (this.loading) {
        return
      }
      this.loading = true
      let res = await this.fetchData()
      this.items.push(...res.data)
      this.loading = false
      this.page++
    },
    fetchData() {
      return $http.get('/api/load-more', { params: { page: this.page, pageSize: this.pageSize } })
    }
  }
}
</script>

<style>
.container {
  height: 100vh;
  overflow-y: scroll;
}
.loading {
  text-align: center;
  padding: 10px;
}
</style>

我们在模板中使用了v-for指令来循环渲染列表项，每个列表项都有一个唯一的key属性。容器元素上使用了v-scroll-top指令，将容器元素的scrollTop属性与组件中的scrollTop变量绑定起来。当滚动到容器底部时，会自动执行loadMoreData方法，加载更多数据。在这个方法中，我们先判断是否正在加载数据（loading），如果是，则直接返回；否则将loading标志设为true，通过fetchData方法来获取数据，然后将数据添加到items中，将loading标志设为false，page加1。

在方法中，我们调用了一个fetchData方法来获取数据。这里我们使用了axios来发送HTTP请求，fetchData方法返回一个Promise对象，一旦请求成功，resolve将解析到数据。在请求结束后，我们将数据通过push方法添加到items数组中，items数组的变化会自动触发模板的重新渲染。

在样式中，我们设置了.container元素的高度为可视区域的高度，overflow-y属性为scroll，这样就可以在元素内容超出容器高度时出现滚动条。我们使用了loading类来展示loading效果。

这样就实现了一个简单的下拉加载组件，可以自动加载更多数据，同时还有loading效果。这只是一个简单的例子，我们还可以在这个基础上做一些其他的改进，比如添加一个加载完成后的提示信息，或者优化加载性能。