美文网首页
vue 上拉加载

vue 上拉加载

作者: 木易早上 | 来源:发表于2021-09-24 18:03 被阅读0次

    在Vue.js的钩子函数created里初始化加载数据,在钩子函数mounted中声明一个scroll事件监听,监听屏幕的高度变化,一旦滑动到达屏幕底部就去后台请求新的数据。

     // 监听滚动事件
    mounted () {
        window.addEventListener('scroll', this.handleScroll,true)
      },
    
        handleScroll () {
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; //滚动条的位置
          var windowHeitht = document.documentElement.clientHeight; //在页面上返回内容的可视高度
          var scrollHeight = document.documentElement.scrollHeight; //返回整个元素的高度(包括带滚动条的隐蔽的地方)
          //是否滚动到底部的判断
          if(Math.round(scrollTop) + windowHeitht == scrollHeight){
            this.index = this.index + 1;//下一页
            if(this.index <= this.pages){
                this.loadDataList()
            }
          }
        },
    

    获取列表的方法内判断已是最后一页时,显示提示“没有更多了”。

    注意容器的css,height:100%;overflow-y:scroll;

    相关文章

      网友评论

          本文标题:vue 上拉加载

          本文链接:https://www.haomeiwen.com/subject/dzuzgltx.html