vue项目移动端如何实现上滑加载？

vue项目移动端如何利用addEventListener监听和this.$nextTick(() => {}）实现上滑加载功能？下面编程教程网小编给大家详细介绍一下实现代码！

实现代码如下：

created(){
  loading = showLoading('加载中…')//这是我引用的vant可以不写
  this.custid = localStorage.getItem('cust_id')
  //初始化加载数据
  this.methodsGetMessage(this.custid,this.pageNum,this.pageSize)
},
mounted(){
  //监听如果页面发生滚动时
  this.$nextTick(() => {
    this.$refs.homeUl.addEventListener('scroll',this.handleScroll,true);
  })
},
methods:{
  //初始化加载数据
  methodsGetMessage(custid,pageNum,pageSize){
    loading = showLoading('加载中…')
    getMessage(custid,pageNum,pageSize).then((res)=>{
      loading.clear()
      if(res.code == 200){
        this.pagNum += 1;
        if(res.data.list == []){
          this.list = []
          showToast('暂无消息')
        }else{
          this.totalnum = Math.ceil(res.data.total/8)
          var list=res.data.list
          for(var i in list){
            list[i].addtime = this.dateToString(list[i].addtime)
          }
          this.list.push(list)
          this.listLength = list.length
        }
        loading.clear()
        //隐藏
      }else{
        showToast('获取消息失败')
        loading.clear()
      }
    })
  },
  //页面滑到底部需要调用的方法
  handleScroll(){ //下面这部分兼容手机端和PC端
    var scrollTop = this.$refs.homeUl.scrollTop; //滚动条的位置
    var windowHeitht = this.$refs.homeUl.clientHeight; //在页面上返回内容的可视高度
    var scrollHeight = this.$refs.homeUl.scrollHeight; //返回整个元素的高度（包括带滚动条的隐蔽的地方）
    //是否滚动到底部的判断
    if(Math.round(scrollTop) + windowHeitht == scrollHeight){
      console.log(this.pagNum+'=='+this.totalnum)
      if(this.pagNum <= this.totalnum){
        this.methodsGetMessage(this.custid,this.pageNum,this.pageSize)
      }else{
        this.notList = true
        return;
      }
    }
  },
}

以上是编程学习网小编为您介绍的“vue项目移动端如何实现上滑加载？”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。