vue中实现滚动加载页面，监听滚动距离等

1、用element框架自带的函数监听滚动条。

具体方法是在div中设置最大高度max-height=xxx，将v-infinite-scroll="loadList"放在div上，当滚轮滑到最下面时，触发loadList函数，进而实现加载下一页。

<template>
  <div id="embedContainer" class="app-main" v-loading="loading">
    <div>
      <div
        class="body"
        id="context"
        v-show="swichTitle === 'share'"
        v-infinite-scroll="loadList"
      >
        

        </div>
      </div>
  </div>
</template>

<script>
import { getReportShare } from "@/api/index/share";
export default {
  components: {
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 30,
      },
      swichTitle: undefined,
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取数据
    async getList() {
      this.loading = true;
      let userid = this.$store.state.user.userId;
      let params = {
        shareUserId: userid,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      };
      let res = await getReportShare(params);
      if (params.pageNum === 1) {
        this.shareDataList = res.rows;
        this.loading = false;
      } else {
        if (res.rows.length > 1) {
          res.rows.forEach((element) => {
            this.shareDataList.push(element);
          });
          this.loading = false;
        } else {
          this.loading = false;
        }
      }
    },

    // 触发函数加载数据：
    async loadList() {
      this.queryParams.pageNum = this.queryParams.pageNum + 1;//页数加 1
      await this.getList(); //请求一次接口
    },

  },
};
</script>

只展示了用法，省略了其他样式等代码，值得注意的是：如果此时滚动加载的dom元素中需要用到条件判断语句， 要用v-show，不能用v-if，不然会有问题的......

2、table表格的滚动加载。

element表格中若想固定表头，只需要设置表格的高度height为固定值即可，但是此时v-infinite-scroll属性是不能用在table上的，如果table想实现滚动加载，则需要借助插件来实现：

1、安装

npm install --save el-table-infinite-scroll

2、引入（局部引入）

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}
</script>

2、引入（全局引入）

//main.js文件中：

import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';

Vue.use(elTableInfiniteScroll);

3、使用：

使用方法和上面的使用方式一样：只不过是原来的 v-infinite-scroll 属性改为了 v-el-table-infinite-scroll="loadList"

此部分参考了原文链接：​​​​​​element-ui 的 el-table 上使用无限滚动加载（与自带的 infinite-scroll 结合）_YuJinpan的博客-CSDN博客

---

3、监听滚动条实时位置的方法：

需求，当在滚到一定距离的时候进行操作，则需要清楚的知道滚动条的位置：

1，在getlist()中添加监听方法：

// 监听滚轮参数
let con = document.getElementById("context"); // 监听的dom元素
con.addEventListener("scroll", this.handleScroll, true);

2，在方法handleScroll中添加对应操作，打印滚动的距离：

// 监听滚轮：
 handleScroll() {
  let con = document.getElementById("context");
  let scrollTop = con.scrollTop;
  console.log(scrollTop);
    if (scrollTop > 230) {
        //执行操作
    } else {

    }
},

3，在离开页面时销毁：

    // 销毁事件监听
    beforeDestroy() {
      document.removeEventListener('scroll', this.handleScroll)
    }

此部分参考了原文链接：

Vue 中实现 div 在页面滚动后停留在页面固定位置_丿Mr_Liu的博客-CSDN博客_vue 固定div