vue实现下拉加载其实没那么复杂

下面我将为您详细讲解“Vue实现下拉加载其实没那么复杂”的完整攻略。

1. 实现思路

实现下拉加载的思路比较简单，主要是利用vue的组件化和axios的数据请求。首先创建一个可滚动加载的组件，在其生命周期中利用axios请求数据并更新到组件的显示列表中，当滚动到底部时再次触发axios请求数据，重复更新从而实现下拉加载。

2. 实现步骤

2.1 创建可滚动加载的组件

组件分为模板、样式和脚本三部分，模板中创建列表展示组件，并在mounted和activated生命周期中设置滚动事件监听。

<template>
  <div class="scroll" ref="scroll">
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <div class="loading" v-show="isLoadMore">
      <span>正在加载中</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      list: [],
      isLoadMore: false,
      isFinished: false
    };
  },
  methods: {
    fetchData() {
      return axios.get(`/api/list?page=${this.page}&pageSize=${this.pageSize}`);
    },
    handleScroll() {
      const scrollHeight = this.$refs.scroll.scrollHeight;
      const scrollTop = this.$refs.scroll.scrollTop;
      const clientHeight = this.$refs.scroll.clientHeight;
      const diff = scrollHeight - scrollTop - clientHeight; //计算滚动距离
      if (diff <= 0 && !this.isLoadMore && !this.isFinished) {
        this.isLoadMore = true;
        this.fetchMoreData();
      }
    },
    fetchMoreData() {
      this.page++;
      this.fetchData()
        .then(res => {
          this.list = this.list.concat(res.data.list);
          if (res.data.list.length < this.pageSize) {
            this.isFinished = true;
          } else {
            this.isLoadMore = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    this.$refs.scroll.addEventListener('scroll', this.handleScroll);
    this.fetchData().then(res => {
      this.list = res.data.list;
    });
  },
  destroyed() {
    this.$refs.scroll.removeEventListener('scroll', this.handleScroll);
  },
  activated() {
    this.$refs.scroll.addEventListener('scroll', this.handleScroll);
  },
  deactivated() {
    this.$refs.scroll.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<style>
.scroll {
  height: 200px;
  overflow-y: auto;
}
.loading {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>

2.2 发送请求获取数据

利用axios发送异步请求获取数据，将获取到的数据更新到组件的list列表中。

fetchData() {
  return axios.get(`/api/list?page=${this.page}&pageSize=${this.pageSize}`);
}

2.3 监听滚动事件

利用addEventListener添加滚动事件的监听，并在滚动到底部触发进行新一轮数据更新。

handleScroll() {
  const scrollHeight = this.$refs.scroll.scrollHeight;
  const scrollTop = this.$refs.scroll.scrollTop;
  const clientHeight = this.$refs.scroll.clientHeight;
  const diff = scrollHeight - scrollTop - clientHeight; //计算滚动距离
  if (diff <= 0 && !this.isLoadMore && !this.isFinished) {
    this.isLoadMore = true;
    this.fetchMoreData();
  }
},

2.4 重复更新列表数据以实现下拉加载

在fetchMoreData方法中，利用concat方法将新获取的数据添加到列表最后，并根据当前返回的数据数与请求时设定的每页数据数来判断是否需要进行下一轮数据请求。

fetchMoreData() {
  this.page++;
  this.fetchData()
    .then(res => {
      this.list = this.list.concat(res.data.list);
      if (res.data.list.length < this.pageSize) {
        this.isFinished = true;
      } else {
        this.isLoadMore = false;
      }
    })
    .catch(err => {
      console.log(err);
    });
}

3. 示例说明

3.1 示例1：网络API中获取数据

我们可以模拟后台接口，通过axios获取数据，模板如下：

fetchData() {
  return axios.get(`/api/list?page=${this.page}&pageSize=${this.pageSize}`);
}

3.2 示例2：本地文件中的数据

我们也可以将需要展示的数据存放在本地json文件中，通过axios进行数据读取。例如我们存放以下数据到本地文件list.json：

{
  "list": [
    "第1条数据",
    "第2条数据",
    "第3条数据",
    "第4条数据",
    "第5条数据",
    "第6条数据",
    "第7条数据",
    "第8条数据",
    "第9条数据",
    "第10条数据",
    "第11条数据",
    "第12条数据",
    "第13条数据",
    "第14条数据",
    "第15条数据",
    "第16条数据",
    "第17条数据",
    "第18条数据",
    "第19条数据",
    "第20条数据"
  ]
}

在发送数据请求时通过读取本地文件来获取数据：

fetchData() {
  return axios.get('/api/list.json');
}

以上就是“Vue实现下拉加载其实没那么复杂”的一个完整攻略，希望对您有所帮助！