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

  1. mounted () {
  2. window.addEventListener('scroll', this.handleScroll)
  3. },
  4. destroyed () {
  5. window.removeEventListener('scroll', this.handleScroll)
  6. },

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

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

  

vue 原生添加滚动加载更多的更多相关文章

  1. 笔记-VUE滚动加载更多数据

    来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...

  2. Vue——轻松实现vue底部点击加载更多

    前言 需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈 一次请求 页面 使用slice来进行限制展现从0,a的数据 <div v-fo ...

  3. jquery weui ajax滚动加载更多

    手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...

  4. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  5. vue mpvue 上拉加载更多示例代码

    vue 上拉加载更多示例代码 可以比较简单的改为 mpvue , 去除滚动判断,直接放在 onReachBottom 周期即可. html <div id="app"> ...

  6. vue项目上滑滚动加载更多&下拉刷新

    上滑滚动时获取内容高度.屏幕高度和滚动高度(此处#sslist要为内容是id) 内容高度  let innerHeight = document.querySelector("#sslist ...

  7. Vue.js中滚动条加载更多数据

    本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...

  8. 微信小程序实现滚动加载更多

    1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-v ...

  9. vue+element ui 滚动加载

    <div id="app"> <div class="infinite-list-wrapper" style="overflow: ...

随机推荐

  1. JDK1.8 新特性详解

    一  引言 现在java 10都已经出来了,而自己对java 8的一些新特性都不了解,很是惭愧,而且许多面试都有问到java8的新特性,借此博客好好学习这些新特性 二  新特性 1 default关键 ...

  2. Shiro权限管理框架(四):深入分析Shiro中的Session管理

    其实关于Shiro的一些学习笔记很早就该写了,因为懒癌和拖延症晚期一直没有落实,直到今天公司的一个项目碰到了在集群环境的单点登录频繁掉线的问题,为了解决这个问题,Shiro相关的文档和教程没少翻.最后 ...

  3. scp -本地文件上传服务器,指定端口

    scp 命令可以将本地文件上传服务器,或者将服务器上的文件下载到本地, 1.  上传服务器: scp [本地文件目录]  [服务器用户名]@[服务器名]:/[服务器上文件路径] 比如 scp /Doc ...

  4. Java基础(二十九)Java IO(6)对象序列化(Object Serialization)

    参考之前整理过的Java序列化与反序列化:https://www.cnblogs.com/BigJunOba/p/9127414.html 使用对象输入输出流可以实现对象序列化与反序列化,可以直接存取 ...

  5. django-模板之静态文件加载(十四)

    1.在templates同级目录下建static 2.index.css 3.index.html {% load static %} <!DOCTYPE html> <html l ...

  6. Spring Boot 日志处理你还在用Logback?

    ▶ Log4j2 性能 https://logging.apache.org/log4j/2.x/performance.html ▶ Spring Boot 依赖与配置 Maven 依赖 <! ...

  7. .net core 3.0 在过滤器读取request.body 里的请求,controller[FromBody]读取不到参数,解决办法

    1,注入IHttpContextAccessor httpContex 2,var req = _httpContext.HttpContext.Request; //  这句很重要,开启读取 否者下 ...

  8. beanFactory 设计模式 Bean 生命周期的胡言乱语,哈哈

    写在前面的话 适用读者:有一定经验的,本文不适合初学者,因为可能不能理解我在说什么 文章思路:不会一开始就像别的博客文章那样,Bean 的生命周期,源码解读(给你贴一大堆的源码).个人觉得应该由问题驱 ...

  9. 运用wxs制作微信小程序左滑功能和跳转,性能更优越

    锲子 微信小程序自定义左滑功能加上跳转,换成以往,左滑功能的逻辑一般是在js中实现,但在拖动方面,性能并不是那么的流畅.如今,官方新扩展了一套脚本语言wxs,在IOS设备上运行,性能会比JS快2~20 ...

  10. win10环境下配置openCV+pycharm+python3.6

    转载地址:https://blog.csdn.net/u010429424/article/details/73649985 Pycharm + OpenCV3 + Python3 配置记录 引言: ...