vue移动端页底自动加载

目录

• 流程
• 方法
  • 查询方法
  • 添加监听

流程

1. 页面加载，查询第一页
2. 查询时，设置字段querying=true，表示数据查询中，防止滚动时多次加载
3. 查询后，判断是否还有下一页，若是没有直接就结束了
4. 还有下一页，判断当前显示的数据是否超出页面显示了（若是显示的数据少了的话，不会滚动，就不会自动加载了），若是显示的少了，多加载几页，知道形成滚动条
5. 若是还有下一页，querying=false，表示数据加载完成，可以通过滚动条加载下一页了

方法

查询方法

      selectInfo(pageNum) {
        let _this = this;
        _this.querying = true;
        _this.showStateText = '数据加载中';
       ....
        调用接口.then(function (res) {
          if (res.success) {
			//设置页数
            _this.page = {
              currentPage: res.data.current,
              pagesize: res.data.size,
              total: res.data.total,
              pages: res.data.pages
            }
            //将list数据拼接到之前的list之后
            _this.tableData.push.apply(_this.tableData, res.data.records);
            _this.showStateText = '加载完成'
            //页面加载完
            _this.$nextTick(() => {
              if (_this.page.currentPage < _this.page.pages) {
                let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                if (windowHeight >= scrollHeight) {
                  //没出现滚动条
                  _this.selectInfo(_this.page.currentPage + 1)
                } else {
                  // _this.$message.success("继续监听");
                  _this.querying = false;
                }
              } else {
                // _this.$message.info("无需查询");
                _this.showStateText = '到底了'
              }
            })

          } 

        }).catch(function (error) {
          console.log(error)
          ddtoast(JSON.stringify(error));
          _this.querying = false;
        })

      }

添加监听

在mounted() 中设置

        let _this = this;

        window.onscroll = function () {
        //页面加载完
          _this.$nextTick(() => {
            if (!_this.querying && _this.page.currentPage < _this.page.pages) {
              //变量scrollTop是滚动条滚动时，距离顶部的距离
              var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
              //变量windowHeight是可视区的高度
              var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
              //变量scrollHeight是滚动条的总高度
              var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
              // _this.$message.info("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
              if ((scrollTop + windowHeight + 100 >= scrollHeight)) {
                _this.selectInfo(_this.page.currentPage + 1)
              }

            }
          });

        }