下拉加载更多

throlle()封装一个节流的方法

为什么要分装一个节流的方法呢？

是为了防止触底事件持续触发，使用节流的话，就可以规定在 n 秒内触发一次，可以降低计算的频率，
 

     // 自己封装一个节流的函数， 这是一个闭包

     throlle(fn, delay) {

      // fn 是被回调的函数，delay 是讲个的时间 1000=1 秒

          const that = this;

         let time = +new Date(); //当前触发的时间，也是被存储的开始的触发时间

          return function () {

          // 用当前运行中的时间减去开始记录的时间，如果值大于 delay,说明已经达到时间间隔

              if (+new Date() - time >= delay) {

               fn.apply(that, arguments); //call 和 apply 都是可以自动执行的函数

                // 要把记录的时间重新赋值

                time = +new Date();

            }

         };

     },

附增：闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的（大白话：访问函数内部变量的函数就是闭包）。

（想要了解更多请看本人其他文章）

 loadnext（） 滚动到底部加载下一屏数据

如何监听页面的滚动距离：页面的总高度=页面的可是区域的高+当前页面的滚动距离

document.documentElement.scrollHeight=
document.documentElement.clientHeight+document.documentElement.scrollTop

在 methods 中定义一个方法 loadnext()，在当前页面数据加载完之后调用

1.首先进行页面滚动距离的监听，进行判断，当总页面的高度小于页面的可是区域的高+当前页面的滚动距离，进行下一步

2，获取接口的总条数对当前页面的页数进行比较，当前的页数大于总条数除以每页显示的条数时，就说明没有更多的数据。如果没有，就让当前页面的页数++

3.调用数据的时候记得对后端的接口进行一个检测

4.更新页面额数据，当当前页面的页数改变是重新将数据更新可采用拓展运算符的方式
 

  loadnext() {

      let win = document.documentElement;

      //throlle() 这个是分装的一个节流的方法，用到的是闭包，

      window.onscroll = this.throlle(() => {

        if (win.scrollHeight - 200 <= win.clientHeight + win.scrollTop) {

            //page第几页 number每页多少条 totals接口返回数据里面的总条数

          if (this.page >= Math.ceil(this.totals / this.number)) {

            return this.$toast("没有更多数据了！");

          }

          this.page++;

          getProductList(this.page, this.number).then((res) => {

            // 注意，永远不要相信后端接口

           if (res.data.code !== 1) return this.$toast("请求数据失败！");

            this.list = [...this.list, ...res.data.result.list];

          });

        }

      }, 1000);

    },