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

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

实现代码如下：

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;
      }
    }
  },
}

js文章太长显示部分（百分比），点击按钮显示全部

事件绑定addEventListener和事件解除绑定removeEventListener的基本用法

如何利用js检测用户滚动页面的位置

vue无法获取getElementById属性是什么原因

js如何设置事件监听

标签： addEventListener, nextTick, 上滑加载

上面是“vue项目移动端如何实现上滑加载？”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3021.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！