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
  1. 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
  1. Methods属性中增加添加的事件句柄函数
listenerFunction(e) {
    // 添加事件句柄
    document.addEventListener('scroll', this.handleScroll, true);
}
  1. 新建beforeDestroy 属性,使移除通过addEventListener()方法添加的事件句柄和函数方法
beforeDestroy () {
    // 移除通过addEventListener()方法添加的事件句柄
    document.removeEventListener("scroll", this.listenerFunction);
}
  1. 在created函数中初始化函数,实现监听滚动条的函数自动执行
this.listenerFunction();
  1. 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);
        }
      }
}
  1. 在HTML页面增加div,element中的加载组件
<div v-loading="loading"></div>
  1. 下拉加载分页刷新已经完成,效果如下
    在这里插入图片描述
Logo

前往低代码交流专区

更多推荐