欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

通过原生vue添加滚动加载更多功能

时间:2021-03-25 09:19:25|栏目:vue|点击:

这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱。我们在mounted建立滚动,destroyed销毁滚动。

mounted () {
  window.addEventListener('scroll', this.handleScroll)
},
destroyed () {
  window.removeEventListener('scroll', this.handleScroll)
},

定义一个函数,在滚动到底部时候使滚动条距离顶部距离与可视区域高度之和等于滚动条总高度,在加载后如果列表长度为0时应该停止加载,要不会出现一直加载的情况

handleScroll () {
    //变量scrollTop是滚动条滚动时,距离顶部的距离
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    //变量windowHeight是可视区的高度
    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //变量scrollHeight是滚动条的总高度
    var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
    //滚动条到底部的条件
    if(scrollTop+windowHeight==scrollHeight &&this.list.length !==0){
      this.loadMore() // 加载的列表数据
    }
  }

上一篇:vue实现ajax滚动下拉加载,同时具有loading效果(推荐)

栏    目:vue

下一篇:在vue中,v-for的索引index在html中的使用方法

本文标题:通过原生vue添加滚动加载更多功能

本文地址:http://www.codeinn.net/misctech/87744.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有