Vue 实现分页效果 下拉加载页面

2020年10月27日 17:57:58 MR黎
原文链接：文档：Vue.note
链接：http://note.youdao.com/noteshare?id=7e281484b7c61482547950f5e93be591

应用于PC端的网站项目使用Vue+axios+Element等组件进行开发，项目需求首页的提供需求展示列表页面需要下拉无刷新加载页面。

1. 页面数据初始化,Data数据中添加三个初始化的变量

// 设置一个开关来避免重复请求数据
scroll:true,
// 当前页数
pagenum:1,
// 总页数
totalnum:10,
// loading加载变量 element加载组件
loading: false

2. Methods属性中增加getlistData方法，使用axios组件进行后端提供列表Api接口进行对接，获得页面数量和当前页面数量，并且在接口回调中根据页面数进行判断插入数组

// 当前页面数量
let per_page = this.$data.totalnum
// 当前页数量
let page = this.$data.pagenum

// 如果接口请求成功，返回的code == 200，那么回调处理请求

// 根据当前页面数是否为1来进行判断，同时将请求的列表装在定义的控制符串里
if (this.$data.pagenum === 1) {
    this.$data.listData = res.data.data.list;
    // 获取当前页数
    this.$data.pagenum = res.data.data.page;
    // 获取总页数
    this.$data.totalnum = res.data.data.per_page;
} else {
    // 将之前请求的数据以及后面请求回来的数据装到一个数组里面（拓展运算符）
    this.$data.listData = [
        ...this.$data.listData,
        ...res.data.data.list
    ]
}

// 当前页数累加
++this.$data.pagenum

3. Methods属性中增加添加的事件句柄函数

listenerFunction(e) {
    // 添加事件句柄
    document.addEventListener('scroll', this.handleScroll, true);
}

4. 新建beforeDestroy 属性，使移除通过addEventListener()方法添加的事件句柄和函数方法

beforeDestroy () {
    // 移除通过addEventListener()方法添加的事件句柄
    document.removeEventListener("scroll", this.listenerFunction);
}

5. 在created函数中初始化函数，实现监听滚动条的函数自动执行

this.listenerFunction();

6. Methods添加监听页面滚动条是否到底部的方法，触发事件滚动后续的系列操作

handleScroll () {
      // 是否滚动到底部的判断
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight = document.documentElement.clientHeight;
      let scrollHeight = document.documentElement.scrollHeight;

      if (scrollTop + clientHeight >= scrollHeight) {
        // 是否调用请求方法判断
        if (this.$data.pagenum > this.$data.totalnum) {
          return;
        } else {
          this.getlistData()
          this.$data.loading = true
          this.timer = setTimeout(()=>{
            this.$data.loading = false
          },5000);
        }
      }
}

7. 在HTML页面增加div，element中的加载组件

<div v-loading="loading">div>

8. 下拉加载分页刷新已经完成，效果如下