vue 上拉加载

在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 上拉加载)