vue 页面滚动条到达底部后自动加载分页查询

最新推荐文章于 2024-08-20 14:32:27 发布

梵凡0.1

最新推荐文章于 2024-08-20 14:32:27 发布

阅读量524

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_53740842/article/details/132640801

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

说明: 在前面两篇文章中简单介绍了vue 页面滚动条到达底部后自动加载分页查询,身为大学刚毕业后端人员,第一次接触前端方面的知识,前面的文章有不少bug,下面介绍我最后在项目中使用的.

在数据中添加分页查找所需要的参数和限制条件

data() {
    return {
      isLoading:true,
      tableFrom: {
        page: 1,
        limit:2,
      },
      wonderfulList:[]
    };
  },

然后methods的代码如下:

methods: {
    load() {
      if(this.isLoading) {
        this.tableFrom.page++;
        this.getList();
        console.log("进来了")
      }
    },
    getList() {
      getAttrationsList(this.tableFrom).then((res)=>{
        console.log(res.data.list)
        const newDate=res.data.list;
        if(this.tableFrom.page > 1){
          this.wonderfulList = [...this.wonderfulList, ...newDate];
          if(newDate.length !=this.tableFrom.limit){
            this.isLoading=false;
          }
        }else{
          this.wonderfulList=res.data.list;
        }
      })
    },
    handlerNav(item,index){
      this.currentId = index
    },
    handleScroll() {
      const scrollHeight = document.documentElement.scrollHeight; // 文档的总高度
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 页面滚动的距离
      const clientHeight = document.documentElement.clientHeight; // 视窗的高度
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log('触底了');
        this.load()
      }
      const scrollTop1 = window.pageYOffset || document.documentElement.scrollTop;
      if(scrollTop1>200){
        this.showNav = true
      }else{
        this.showNav = false
      }

    },
  },

最后在监听器下的代码如下:

 mounted() {
    this.getList()
    window.addEventListener('scroll', this.handleScroll);
  },

  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },